Benutzerdefiniertes JQuery Ajax-Übermittlungsformular ohne Aktualisierung

Die $.ajax-Methode von Jquery kann Ajax-Aufrufe implementieren und URL, Beitrag, Parameter usw. festlegen.

Wenn Sie viel Code schreiben müssen, um ein vorhandenes Formular einzureichen, warum übertragen Sie die Übermittlung des Formulars nicht einfach direkt an Ajax?

Vorherige Verarbeitungsmethode

Der Formularcode lautet beispielsweise wie folgt

<form id="Form1" action="action.aspx" method="post" >
名称：<input name="name" type="text" /><br />
密码：<input name="password" type="password" /><br />
手机：<input name="mobile" type="text" /><br />
说明：<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

Beim Absenden springt er zur Seite action.aspx. Und der Wert kann über Request.Params["name"] abgerufen werden.

Denken

Wenn Sie die Seite nicht aktualisieren und Ajax verwenden möchten, müssen Sie die URL und andere Informationen in $.ajax angeben, was schwer zu pflegen ist.

Ich habe online nachgeschaut und festgestellt, dass Ausländer schon vor langer Zeit eine Lösung hatten. Verwenden Sie Ajax, um die Formularinformationen direkt zu übermitteln. Die Seite wird nicht aktualisiert.

Referenz: http://jquery.malsup.com/form/

Es ist sehr nützlich, aber ich würde trotzdem gerne eines für mich selbst schreiben.

Kern-JS-Code

//将form转为AJAX提交
function ajaxSubmit(frm, fn) {
    var dataPara = getFormJson(frm);
    $.ajax({
        url: frm.action,
        type: frm.method,
        data: dataPara,
        success: fn
    });
}

//将form中的值转换为键值对。
function getFormJson(frm) {
    var o = {};
    var a = $(frm).serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });

    return o;
}

Der erste Parameter der ajaxSubmit-Methode ist das zu sendende Formular und der zweite Parameter ist die Verarbeitungsfunktion nach erfolgreichem Ajax-Aufruf.

Übergeben Sie die Formularaktion an die Ajax-URL, die Formularmethode an den Ajax-Typ und übergeben Sie dann den formatierten Formularinhalt an Daten.

Die getFormJson-Methode konvertiert die Formularelemente in Schlüssel-Wert-Paare im JSON-Format. Achten Sie in der Form: {name:'aaa',password:'tttt'} darauf, diejenigen mit demselben Namen in ein Array einzufügen.

Aufruf

//调用$(document).ready(function(){
    $('#Form1').bind('submit', function(){
        ajaxSubmit(this, function(data){
            alert(data);
        });        return false;
    });
});

Bevor Sie die ajaxSubmit-Methode aufrufen, können Sie überprüfen, ob die Daten korrekt sind. Sie können Ihren eigenen Call-Return-Nachbearbeitungscode unter „alert(data)“ hinzufügen.

Nach dem Aufruf der ajaxSubmit-Methode müssen Sie die return false;-Anweisung hinzufügen, um zu verhindern, dass das Formular gesendet wird

Weitere benutzerdefinierte JQuery-Ajax-Übermittlungsformulare Nr Aktualisieren Sie verwandte Artikel. Bitte achten Sie auf die chinesische PHP-Website!