jQuery utilise ajaxSubmit() pour soumettre un exemple de formulaire

Cet article présente principalement l'exemple jQuery d'utilisation d'ajaxSubmit() pour soumettre un formulaire, qui est implémenté à l'aide du plug-in tiers étendu jquery.form. Les amis dans le besoin peuvent se référer à

ajaxSubmit(obj) La méthode est une méthode dans jquery.form.js, un plug-in de jQuery, vous devez donc d'abord introduire ce plug-in pour utiliser cette méthode. Comme indiqué ci-dessous :

Le code est le suivant :

Alors, comment passer ajaxSubmit(obj) soumettre les données ? Nous avons d'abord besoin d'un formulaire :

XHTML

Le code est le suivant :

Titre :

Contenu : <textarea/><br /><br> <bouton>Soumettre< ;/ bouton><br></form><br><br></p> <p><br>Ce qui précède est un formulaire qui doit soumettre du contenu Normalement, si nous le soumettons directement via le formulaire, le. la page actuelle sautera après la soumission. Accédez à la page indiquée par l'<br>action<a href="http://www.php.cn/java/java-Action.html" target="_blank"> du formulaire. Cependant, souvent, nous ne voulons pas que la page saute après la soumission du formulaire, nous pouvons alors utiliser ajaxSubmit(obj) pour soumettre les données. La méthode d'utilisation est la suivante : </a></p>Le code est le suivant :<p class="codetitle"></p>$('button').on('click', function() {<p class="codebody"><br> $( 'form') .on('submit', function() {<br> var title = $('inpur[name=title]').val(),<br> content = $('textarea').val (); <br> $ (this) .ajaxSubmit ({<br> Type : 'Post', // Méthode de soumission get/post <br> url : 'votre url', // L'URL <br> DATA : Data : { 'Titre' : titre, <br> 'Content' : Contenu <br>}, <br> SUCCÈS : Fonction (données) {// data Les données renvoyées après soumission, généralement <br> json <br> Données<br> // Les données peuvent être traitées ici<a href="http://www.php.cn/wiki/1488.html" target="_blank"> alert('Soumis avec succès !');</a> }<br> $(this).<br>reset<br>Form() ; / Réinitialiser le formulaire après soumission<br>                   ;<a href="http://www.php.cn/wiki/1081.html" target="_blank"></a></p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Un exemple de la différence entre submit() dans JQuery et JS" href="https://m.php.cn/fr/faq/371511.html">Un exemple de la différence entre submit() dans JQuery et JS</a></span><span>Article suivant：<a class="dBlack" title="Un exemple de la différence entre submit() dans JQuery et JS" href="https://m.php.cn/fr/faq/371514.html">Un exemple de la différence entre submit() dans JQuery et JS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>