Verwenden Sie Ajax, um Formulare basierend auf jQuery über jQuery.form.js Plug-in_javascript-Kenntnisse zu senden

Wenn wir das Formular senden und zum Senden kein Ajax verwenden, wird die Seite selbst aktualisiert, was sehr unfreundlich ist. Daher müssen wir unsere Formularübermittlung in den Ajax-Modus ändern, damit Benutzer klar wissen, dass sie sich in At befinden In welchem ​​Stadium wird das Formular eingereicht: Einreichen? Übermittlung erfolgreich?

Ich habe es kurz verwendet. Das jQuery-Formular-Plugin hat die folgenden Vorteile:

1. Unterstützen Sie die Überprüfung vor der Einreichung

2. Support-Rückruf nach der Übermittlung

3. Übernehmen Sie die AJAX-Methode und sorgen Sie für eine gute Benutzererfahrung

Die Übermittlungsmethode ist flexibel. Geben Sie einfach die zu übermittelnde Formular-ID an. Die Übermittlungsparameter sind gleichzeitig konfigurierbar

5. Unterstützt die Übermittlung mehrerer Datentypen, z. B. XML, JSON usw.

Hauptfunktionen:

1.ajaxForm

Fügen Sie alle erforderlichen Ereignis-Listener hinzu, um das Formular für die AJAX-Übermittlung vorzubereiten. ajaxForm kann das Formular nicht senden. Verwenden Sie in der Bereitschaftsfunktion des Dokuments ajaxForm, um die AJAX-Übermittlung des Formulars vorzubereiten. ajaxForm akzeptiert 0 oder 1 Parameter. Dieser einzelne Parameter kann entweder eine Callback-Funktion oder ein Optionsobjekt sein.

Beispiel:

$('#myFormId').ajaxForm();

2.ajaxSubmit

Das Formular wird sofort über AJAX übermittelt. In den meisten Fällen wird ajaxSubmit aufgerufen, um auf den Benutzer zu antworten, der das Formular absendet. ajaxSubmit akzeptiert 0 oder 1 Parameter. Dieser einzelne Parameter kann entweder eine Callback-Funktion oder ein Optionsobjekt sein.

Beispiel:

// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 为了防止普通浏览器进行表单提交和产生页面导航（<span style="color: #333333;"><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" target="_blank"><span style="color: #333333;">防止页面刷新</span></a></span>？）返回false
return false;
});

3.formSerialize

Serialisieren (oder serialisieren) Sie das Formular in eine Abfragezeichenfolge. Diese Methode gibt eine Zeichenfolge im folgenden Format zurück: Name1=Wert1&Name2=Wert2. Diese Methode gibt einen String zurück.

Beispiel:

var queryString = $('#myFormId').formSerialize();
// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

4.fieldSerialize

Serialisieren (oder serialisieren) Sie die Feldelemente des Formulars in eine Abfragezeichenfolge. Dies ist praktisch, wenn nur einige Formularfelder serialisiert (oder serialisiert) werden müssen. Diese Methode gibt eine Zeichenfolge im folgenden Format zurück: Name1=Wert1&Name2=Wert2. Diese Methode gibt einen String zurück.

Beispiel:

var queryString = $('#myFormId .specialFields').fieldSerialize();

5.fieldValue

Gibt den Formularelementwert zurück, der dem eingefügten Array entspricht. Ab Version 0.91 gibt diese Methode Daten immer als Array zurück. Wenn der Elementwert als potenziell ungültig beurteilt wird, ist das Array leer, andernfalls enthält es einen oder mehrere Elementwerte. Diese Methode gibt ein Array zurück.

Beispiel:

// 取得密码输入值
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);

6.resetForm

Stellen Sie den ursprünglichen Zustand des Formulars wieder her, indem Sie die ursprüngliche DOM-Methode des Formularelements aufrufen. Beispiel:

$('#myFormId').resetForm();

7.clearForm

Klare Formularelemente. Diese Methode löscht alle Texteingabefelder, Passworteingabefelder und Textfeldfelder, löscht die Auswahl in allen ausgewählten Elementen und löscht alle Optionsfelder und Mehrfachauswahlfelder (Kontrollkästchen), die auf den nicht ausgewählten Zustand zurückgesetzt werden.

Beispiel:

$('#myFormId').clearForm();

8.clearFields

Feldelemente löschen. Die Verwendung ist nur praktisch, wenn einige Formularelemente gelöscht werden müssen.

Beispiel:

$('#myFormId .specialFields').clearFields();

Einfaches Beispiel eines jQuery-Formular-Plugins:

In diesem Artikel wird ausführlich beschrieben, wie jQuery Ajax verwendet, um Formulare über das jQuery.form.js-Plug-in zu senden. Ich hoffe, es gefällt Ihnen.

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>My Jquery</title>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>
  <script type="text/javascript"> 
  // wait for the DOM to be loaded
    $(document).ready(function() { 
     // bind 'myForm' and provide a simple callback function
      $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
      }); 
    }); 
    // attach handler to form's submit event 
    $('#myFormId').submit(function() {   
     // submit the form   
     $(this).ajaxSubmit();   
     // return false to prevent normal browser submit and page navigation   
     return false; 
    });
  </script>
</head>
<body>
  <form id="myForm" action="index.jsp" method="post">
  Name: <input type="text" name="name" />
  Comment:<textarea name="comment"></textarea>
  <input type="submit" value="Submit Comment" />
  </form>
</body>
</html>