jQuery的AJAX：如何追加了“保存”的消息，并使其成为第二后消失

https://stackoverflow.com/questions/1283557

16-09-2019
|

题

这是可能是一个jQuery的专家真的很简单。

我

的blahblah </textarea的> <INPUT TYPE = “按钮” 值= “保存” 的onClick = “saveCaption（23）”> </FORM> </DIV> </p>

<P>我想保存的消息出现和消失。但我并不想使窗体或它的元素消失。</P>

<P>我有一个AJAX调用是像下面这样。</P>

<pre><code>function saveCaption(id) {

var queryString = $('#form'+id).formSerialize();

$.ajax({

type: "POST",

url: "includes/ajax.php?request=saveCaption",

data: queryString,

success: function(response) {

$('#form'+id).append(response)

}

});

return false;

}
</code></pre>

<P>我想知道..我可以附加响应。但是，有没有办法消除它了一秒钟后马上。现在，它只是不断重复，并增加了最后追加。我想它出现和使用淡出之后消失右</P>

<P> <STRONG>更新：我这样做是基于theIV和RaYell的响应。它的工作原理..但它是优雅？</STRONG> </P>

<P>功能saveCaption（ID）{</p>

<pre><code>var queryString = $('#form'+id).formSerialize();

$.ajax({

type: "POST",

url: "includes/ajax.php?request=saveCaption",

data: queryString,

success: function(response) {

$('#form'+id).append('<div id="message">'+response+'</div>');

setTimeout(function () {

$('#message').fadeOut(function(){

$(this).remove();

});

}, 1000);

}

});

return false;
</code></pre>

</div>
					<div class="col-md-6">
											</div>
				</div>
				<div class="row ">
	<div class="col-md-12">
		<p class="title" style="background-color:green;">
			<i class="far fa-thumbs-up"></i> 解决方案 		</p>
		<div class="testo">
			<P>我想你会想要做RaYell的回答上面的组合，但在淡出回调使用删除，否则将继续追加到以前的追加，至少，我认为这将根据这样做这样你措辞你的问题。像这样的东西可以工作：</P>

<pre><code>setTimeout(function () {
  $('selector').fadeOut(function(){
    $(this).remove();
  });
}, 1000);
</code></pre>		</div>
			</div>
</div>
			</div>
				</div>
</div>
<div class="row mt-4 adv">
	<div class="col-12 text-center">
					<ins class="adsbygoogle"
			     style="display:block; text-align:center;"
			     data-ad-layout="in-article"
			     data-ad-format="fluid"
			     data-ad-client="ca-pub-5108424997424987"
			     data-ad-slot="1879801491"></ins>
			<script defer async crossorigin="anonymous">
			     (adsbygoogle = window.adsbygoogle || []).push({});
			</script>
			</div>
</div>
<div class="row mt-4 adv">
	<div class="col-12 text-center">
			</div>
</div>
<div class="row mt-4">
	<div class="col-12">
			<div id="boxSoluzioniAvanzate" class="boxArticolo soluzioni">
						<p class="title" style="background-color:black;"><i class="fas fa-file-alt"></i> 其他提示</p>
			<div class="testo">
			<div id="alt1250471" class="boxBorderTop row noMargin pt-4">
	<div class="col-md-12 text-left">
		<i class="far fa-newspaper fa-2x mb-2" style="display:block;color:gray;"></i>
	</div>
	<div class="col-md-12">
			<p>在您添加您的信息添加这个（内成功回调）：</P>

<pre><code>setTimeout(function () {
    $('selector').fadeOut();
}, 1000);
</code></pre>

<P>的东西，实际上会符合您的消息替换选择。</P>	</div>
</div>
			</div>
		</div>
			</div>
</div>
<div class="row mt-4">
	<div class="col-12">
		<div class="attribution">
			<div>许可以下： <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">CC-BY-SA</a> 和 <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" target="_blank">归因</a></div>
			<div>不隶属于 <a href="https://stackoverflow.com/" target="_blank">StackOverflow</a></div>
		</div>
	</div>
</div>
<div id="share"></div>
					</div>
					<div class="row mb-4 adv">
						<div class="col-md-12 text-center">
							
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5108424997424987"
     data-ad-slot="5412049179"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script defer async crossorigin="anonymous">
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
						</div>
					</div>
				</div>
			</div>
			<aside id="bannerRight" class="col-xs-12 col-md-4 col-lg-3 text-center" >
				<div class="container mt-4">
					<div class="row mb-4 adv">
	<div class="col-md-12">
		
		<ins class="adsbygoogle"
			 style="display:block"
			 data-ad-client="ca-pub-5108424997424987"
			 data-ad-slot="1592207755"
			 data-ad-format="auto"
			 data-full-width-responsive="true"></ins>
		<script defer async crossorigin="anonymous">
			 (adsbygoogle = window.adsbygoogle || []).push({});
		</script>
	</div>
</div>
<div class="row adv">
	<div class="col-md-12">
		
		<ins class="adsbygoogle"
			 style="display:block"
			 data-ad-client="ca-pub-5108424997424987"
			 data-ad-slot="8889943968"
			 data-ad-format="auto"
			 data-full-width-responsive="true"></ins>
		<script defer async crossorigin="anonymous">
			 (adsbygoogle = window.adsbygoogle || []).push({});
		</script>
	</div>
</div>
					<div class="row topArticoli justify-content-center">
						<div class="col-md-12 col-lg-10 pt-4">
						</div>
					</div>
				</div>
			</aside>
		</div>
	</section>
	
	<footer class="site-footer">
		<div class="section-free d-block d-md-flex">
			<div class="section-newsletter col">
							</div>

<div class="col content-free-projects mb-2">
				<div>
					<p class="my-3">有用的链接</p>
				</div>
				<div class="d-flex justify-content-around">
					<div></div>
					<div>
						<a class="nav-link" href="https://www.generacodice.com/cn/tag">标签</a>
						<a class="nav-link" href="https://www.generacodice.com/cn/site/aboutus">关于我们</a>
						<a class="nav-link" href="https://www.generacodice.com/cn/site/contacts">联系人</a>
						<a class="nav-link" href="https://www.generacodice.com/cn/site/privacy">隐私</a>
					</div>
					<div>
						<a class="nav-link social fb" href="https://www.facebook.com/generacodice" target="_blank"><i class="fab fa-facebook"></i> Facebook</a>
						<a class="nav-link social instagram" href="https://www.instagram.com/genera_codice" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
					</div>
					<div></div>
				</div>
				<div class="small-footer-link d-flex align-items-center justify-content-center">
					<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
						<input type="hidden" name="cmd" value="_s-xclick" />
						<input type="hidden" name="hosted_button_id" value="42ZKUPRLM66J2" />
						<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
					</form>
				</div>
			</div>
		</div>
		<div class="row m-0 justify-content-center text-center p-2">
			<div class="col-md-5">
				<p>内容是在创意共享下获得许可的。</p>
				<p class="mb-0">如果您发现侵犯版权，可以通过 <a href="mailto:info@generacodice.com"> info@generacodice.com </a> 要求删除内容。</p>
			</div>
		</div>
	</footer>
	<div id="scroll-to-top" style="display: block;background:none;">
		<img src="https://www.generacodice.com/img/icone/scroll-top.svg" alt="scroll top" style="width:48px;height:48px;background-color:#fff;" />
	</div>
		
	
	
<script src="https://www.googletagmanager.com/gtag/js?id=G-PNYLV6VWJG" async crossorigin="anonymous"></script>
<script crossorigin="anonymous" defer>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-PNYLV6VWJG');
</script>

<script type="application/ld+json" crossorigin="anonymous">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://www.generacodice.com/",
  "potentialAction": {
	"@type": "SearchAction",
	"target": "https://www.generacodice.com/articolo?ricerca={search_term_string}",
	"query-input": "required name=search_term_string"
  }
}
</script>
<!-- Yandex.Metrika counter 
<script type="text/javascript" defer crossorigin="anonymous">
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

ym(79291009, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/79291009" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

		<script>var lingua = "https://www.generacodice.com/cn";</script>
	<script src="/lib/wow.min.js" preload></script>
<script src="/lib/js.cookie.min.js" preload></script>
<script src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?customize=1&tracking=1&thirdparty=1&always=1&noGeoIp=1&showNoConsent=1&showPolicyLink=1&privacyPage=https%3A%2F%2Fwww.generacodice.com%2Fsite%2Fprivacy" preload></script>
<script src="/js/form_ricerca.js" preload></script>
<script src="https://kit.fontawesome.com/99a60a9345.js" preload></script>
<script src="/js/ads.js" defer="defer" preload></script>
<script src="/js/main.js?timestamp=20221207" defer="defer" preload></script>
<script src="/assets/44258436/yii.js"></script>
<script src="/assets/44258436/yii.validation.js"></script>
<script src="/assets/44258436/yii.activeForm.js"></script>
<script src="/js/feedback.js" defer></script>
<script src="/js/articulate.min.js"></script>
<script src="/js/playerTesto.js?202310021220"></script>
<script src="/lib/jssocials/jssocials.min.js"></script>
<script src="/js/sceditor/minified/sceditor.min.js"></script>
<script src="/js/sceditor/minified/formats/xhtml.js"></script>
<script src="/js/articolo/details.js?202309292139"></script>
<script>jQuery(function ($) {
jQuery('#feedback').yiiActiveForm([{"id":"feedbackform-pagina","name":"pagina","container":".field-feedbackform-pagina","input":"#feedbackform-pagina","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"Pagina cannot be blank."});}},{"id":"feedbackform-idargomento","name":"idArgomento","container":".field-feedbackform-idargomento","input":"#feedbackform-idargomento","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.number(value, messages, {"pattern":/^[+-]?\d+$/,"message":"Id Argomento must be an integer.","skipOnEmpty":1});}}], []);
jQuery('#w0').yiiActiveForm([], []);
});</script>	
	<script>
	  window.addEventListener('load', function() {
		var is_adsense_load = 0

window.addEventListener('scroll', function() {
		  if (is_adsense_load == 0) {
			is_adsense_load = 1;

var ele = document.createElement('script');
			ele.async = true;
			ele.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
			var sc = document.getElementsByTagName('script')[0]
			sc.parentNode.insertBefore(ele, sc);

(adsbygoogle = window.adsbygoogle || []).push({
			  google_ad_client: "ca-pub-5108424997424987",
			  enable_page_level_ads: true
			});
		  }
		})
	  })
	</script>
</body>
</html>