Beispiel für ein jQuery-Ajax-Sendeformular (mit Demo-Quellcode)_jquery

Das Beispiel in diesem Artikel beschreibt die jQuery-Ajax-Methode zum Senden eines Formulars. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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?

Bisherige Handhabungsmethoden

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 wird zur Seite action.aspx gesprungen. Und der Wert kann über Request.Params["name"] abgerufen werden.

Denken

Wenn Sie die Seite nicht mit Ajax aktualisieren 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.

Anrufe

//调用
$(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. Unter „alert(data)“ können Sie Ihren eigenen Call-Return-Nachbearbeitungscode hinzufügen.

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

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen dieser Website ansehen: „Zusammenfassung der Ajax-Nutzung in jQuery“, „Zusammenfassung der Kenntnisse im Umgang mit jQuery-Tabellen (Tabellen). ", "Zusammenfassung der JQuery Drag & Drop-Spezialeffekte und -Fähigkeiten", "Zusammenfassung der jQuery Extension-Fähigkeiten", "Zusammenfassung der jQuery Common Classic-Spezialeffekte" , „jQuery-Animation und Zusammenfassung der Verwendung von Spezialeffekten“, „Zusammenfassung der Verwendung des jQuery-Selektors“ und „allgemeine jQuery-Plug-ins und Zusammenfassung der Verwendung“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.