Heim > Web-Frontend > js-Tutorial > Ausführliche Erklärung, wie jQuery ajaxSubmit() zum Senden von Formularinstanzen verwendet

Ausführliche Erklärung, wie jQuery ajaxSubmit() zum Senden von Formularinstanzen verwendet

巴扎黑
Freigeben: 2017-07-03 10:47:43
Original
2249 Leute haben es durchsucht

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:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
Nach dem Login kopieren

Wie übermittelt man also Daten über ajaxSubmit(obj)? Zuerst benötigen wir ein Formular:

XHTML

Der Code lautet wie folgt:

<form>
    标题:<input type="text" name="title" /><br />
    内容:<textarea name="content"><textarea/><br />
    <button>提交</button>
</form>
Nach dem Login kopieren



Das Obige ist ein Formular, das benötigt wird Um Inhalte einzureichen, normalerweise. Wenn wir in diesem Fall direkt über das Formular einreichen, springt die aktuelle Seite nach dem Absenden zu der Seite, auf die durch die Aktion des Formulars verwiesen wird. 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 Verwendung ist wie folgt:

Der Code lautet wie folgt:

$(&#39;button&#39;).on(&#39;click&#39;, function() {
    $(&#39;form&#39;).on(&#39;submit&#39;, function() {
        var title = $(&#39;inpur[name=title]&#39;).val(),
            content = $(&#39;textarea&#39;).val();
        $(this).ajaxSubmit({
            type: &#39;post&#39;, // 提交方式 get/post
            url: &#39;your url&#39;, // 需要提交的 url
            data: {
                &#39;title&#39;: title,
                &#39;content&#39;: content
            },
            success: function(data) { // data 保存提交后返回的数据,一般为 
json
 数据
                // 此处可对 data 作相关处理
                alert(&#39;提交成功!&#39;);
            }
            $(this).
reset
Form(); // 提交后重置表单
        });
        
return
 false; // 阻止表单自动提交
事件
    });
});
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie jQuery ajaxSubmit() zum Senden von Formularinstanzen verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage