Heim >Web-Frontend >js-Tutorial >jQuery verwendet ajaxSubmit(), um ein Formularbeispiel zu senden

jQuery verwendet ajaxSubmit(), um ein Formularbeispiel zu senden

巴扎黑Original: 2017-06-29 10:37:021623Durchsuche

In diesem Artikel wird hauptsächlich das jQuery-Beispiel für die Verwendung von ajaxSubmit() zum Senden eines Formulars vorgestellt, das mithilfe des erweiterten Drittanbieter-Plug-Ins jquery.form implementiert wird

ajaxSubmit(obj) Die Methode ist eine Methode in jquery.form.js, einem Plug-In von jQuery. Sie müssen dieses Plug-In also zuerst einführen, um diese Methode verwenden zu können. Wie unten gezeigt:

Der Code lautet wie folgt:

Also, wie ajaxSubmit(obj) übergeben Daten übermitteln? Zuerst benötigen wir ein Formular:

XHTML

Der Code lautet wie folgt:

Titel:

Inhalt:

<textarea/><br /><br> <button>Senden< ;/ button><br></form><br></p>
<p><br><br>Das Obige ist ein Formular, das normalerweise, wenn wir es direkt über das Formular einreichen, die Die aktuelle Seite springt nach dem Absenden zu der Seite, auf die die <a href="http://www.php.cn/java/java-Action.html" target="_blank">Aktion</a> des Formulars verweist. Wenn wir jedoch oft nicht möchten, dass die Seite nach dem Absenden des Formulars springt, können wir die Daten mit ajaxSubmit(obj) übermitteln. Die Verwendungsmethode ist wie folgt: </p>
<p class="codetitle">Der Code lautet wie folgt:</p>
<p class="codebody">$('button').on('click', function() {<br><br> $( 'form') .on('submit', function() {<br> var title = $('inpur[name=title]').val(),<br> content = $('textarea').val (); <br> $ (this) .ajaxSubmit ({<br> Typ: 'Post', // Absender zum Abrufen/Posten <br> URL: 'Ihre URL', // Die URL <br> DATEN: Daten: { 'Titel': Titel, <br> 'Inhalt': Inhalt <br>}, <br> ERFOLGREICH: Funktion (Daten) {// Daten Die nach der Übermittlung zurückgegebenen Daten, im Allgemeinen <br> JSON <br> Daten<a href="http://www.php.cn/wiki/1488.html" target="_blank"> // Daten können hier verarbeitet werden</a> Alert('Erfolgreich übermittelt!');<br> }<br> $(this).<br>reset<br>Form() ; / Setzen Sie das Formular nach dem Absenden zurück <a href="http://www.php.cn/wiki/1081.html" target="_blank">                     ;</a><br></p><p>Das obige ist der detaillierte Inhalt vonjQuery verwendet ajaxSubmit(), um ein Formularbeispiel zu senden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Ein Beispiel für den Unterschied zwischen subscribe() in JQuery und JS" href="https://m.php.cn/de/faq/371511.html">Ein Beispiel für den Unterschied zwischen subscribe() in JQuery und JS</a></span><span>Nächster Artikel：<a class="dBlack" title="Ein Beispiel für den Unterschied zwischen subscribe() in JQuery und JS" href="https://m.php.cn/de/faq/371514.html">Ein Beispiel für den Unterschied zwischen subscribe() in JQuery und JS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</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/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</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>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/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>