“."/> “.">
suchen

Heim  >  Artikel  >  Web-Frontend  >  Was ist jquery.form.js?

Was ist jquery.form.js?

藏色散人
藏色散人Original
2021-11-11 10:51:371699Durchsuche

jquery.form.js ist ein Formular-Plug-in, das die Übermittlung von Ajax-Formularen und das Hochladen von Ajax-Dateien unterstützt. Seine Referenzmethode ist beispielsweise „8f537151dbb35229fea73b1ffc9e46419429d6e1efad07153846e528605c447e" .

Was ist jquery.form.js?

Die Betriebsumgebung dieses Artikels: Windows7-System, JQuery-Version 1.6.2, DELL G3-Computer

Was ist jquery.form.js?

jQuery.form.js verwendet

jQuery.form.js ist ein Formular-Plug-in, das die Übermittlung von Ajax-Formularen und das Hochladen von Ajax-Dateien unterstützt. 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.6.2.js"></script>
    <script src="~/Scripts/jQuery.form.js"></script>
</head>
<body>
    <div>
        <form id="ajaxForm" method="post" action="/Home/Index" enctype="multipart/form-data">
            <input type="text" name="name" />
            <input type="text" name="sex" />
            <input type="file" name="file" />
            <button type="submit" id="btnSubmit">提交1</button>
        </form>
        <button id="btnButton" type="button">提交2</button>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#ajaxForm").ajaxForm(function () {
                alert("提交成功1");
            });
            $("#ajaxForm").submit(function () {
                $(this).ajaxSubmit(function () {
                    alert("提交成功1");
                });
                return false;
            });
            $("#btnButton").click(function () {
                $("#ajaxForm").ajaxSubmit(function () {
                    alert("提交成功2");
                });
                return false;
            });
        });
    </script>
</body>
</html>
ajaxForm Fügen Sie alle erforderlichen Ereignis-Listener hinzu, um die Übermittlung des Ajax-Formulars vorzubereiten. ajaxForm kann das Formular nicht senden. Verwenden Sie in der Bereitschaftsfunktion des Dokuments ajaxForm, um die Ajax-Übermittlung des Formulars vorzubereiten. Akzeptiert 0 oder 1 Parameter. Der Parameter kann eine Callback-Funktion oder ein Optionsobjekt sein. $("#formid").ajaxForm();
ajaxSubmit Verwenden Sie Ajax, um das Formular abzusenden. Akzeptiert 0 oder 1 Parameter. Der Parameter kann eine Callback-Funktion oder ein Optionsobjekt sein.

$("#formid").ajaxSubmit();

oder

$("#formid").submit(function(){

$(this).ajaxSubmit();

return false;

});
formSerialize Serialisieren (oder serialisieren) Sie das Formular in eine Abfragezeichenfolge. Diese Methode gibt eine Zeichenfolge im folgenden Format zurück: Name1=Wert1&Name2=Wert2. None $("#formid").formSerialize();
fieldSerialize serialisiert (oder serialisiert) die Feldelemente des Formulars in eine Abfragezeichenfolge. Dies ist praktisch, wenn nur einige Formularfelder serialisiert (oder serialisiert) werden müssen. Gibt eine Zeichenfolge im folgenden Format zurück: Name=Wert1&Name2=Wert2. None $("#formid .specialFields").fieldSerialize();
fieldValue Gibt den Formularelementwert zurück, der dem eingefügten Array entspricht. Diese Methode gibt Daten in Form eines Arrays zurück. Wenn festgestellt wird, dass der Elementwert möglicherweise ungültig ist, ist das Array leer. None $("#formid :password").fieldValue();
resetForm Stellen Sie das Formular in seinen ursprünglichen Zustand zurück. Keine $("#formid").resetForm();
clearForm Löschen Sie das Formularelement. Diese Methode löscht den gesamten Text, das gesamte Passwort und den gesamten Textbereich, löscht die Auswahl im Auswahlelement und setzt alle Optionsfelder und Kontrollkästchen auf den nicht ausgewählten Status zurück. None $("#formid").clearForm();
clearFields Feldelemente löschen. Praktisch, wenn nur einige Formularelemente gelöscht werden müssen. None $("#formid .specialFields").clearFields();

Options-Objekt

Sowohl ajaxForm als auch ajaxSubmit unterstützen zahlreiche Optionsparameter, die mithilfe eines Optionsobjekts bereitgestellt werden können.

Ziel Gibt die Elemente auf der Seite an, die als Reaktion auf den Server aktualisiert werden. Der Wert des Elements kann als jQuery-Selektorzeichenfolge, als jQuery-Objekt oder als DOM-Element angegeben werden. Standardwert: null
url Geben Sie die URL zum Senden von Formulardaten an. Standardwert: Der Aktionsattributwert des Formulars
Typ Gibt die Methode zum Senden der Formulardaten an: „GET“ oder „POST“. Standardwert: GET
beforeSubmit Die Rückruffunktion, die aufgerufen wird, bevor das Formular gesendet wird. Wenn die Rückruffunktion „false“ zurückgibt, wird das Formular nicht gesendet. Die Rückruffunktion benötigt drei Aufrufparameter: Formulardaten in Form eines Arrays, ein jQuery-Formularobjekt und das in ajaxForm/ajaxSubmit übergebene Optionsobjekt. Standardwert: null
Erfolg Die Rückruffunktion wird aufgerufen, nachdem das Formular erfolgreich übermittelt wurde. Anschließend bestimmt der Wert der Option „dataType“, ob der Wert von „responseText“ oder „responsXML“ zurückgegeben wird. Standardwert: null
dataType Zurückgegebener Datentyp: einer von null, „xml“, „script“, „json“. Standardwert: null
resetForm gibt an, ob zurückgesetzt werden soll, wenn das Formular erfolgreich gesendet wurde. Standardwert: null
clearForm gibt an, ob die Formulardaten gelöscht werden sollen, wenn das Formular erfolgreich übermittelt wird. 
var options={
    target : &#39;#output&#39;,    // 把服务器返回的内容放入id为output的元素中
    beforeSubmit : showRequest,    // 提交前的回调函数
    success : showResponse,    // 提交后的回调函数
    // url : url,    //默认是form的action，如果申明，则会覆盖
    // type : type,    // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖
    // dataType : null,    // html（默认）、xml、script、json接受服务器端返回的类型
    // clearForm : true,    // 成功提交后，清除所有表单元素的值
    // resetForm : true,    // 成功提交后，重置所有表单元素的值
    timeout : 3000    // 限制请求的时间，当请求大于3秒后，跳出请求
}
function showRequest(formData, jqForm, options){
    // formData: 数组对象，提交表单时，form插件会以ajax方式自动提交这些数据，格式如[{name:user,value:val},{name:pwd,value:pwd}]
    // jqForm: jQuery对象，封装了表单的元素
    // options: options对象
    var queryString=$.param(formData); // name=1&address=2
    var formElement=jqForm[0]; // 将jqForm转换为DOM对象
    var address=formElement.address.value; // 访问jqForm的DOM元素
    return true; // 只要不返回false，表单都会提交，在这里可以对表单元素进行验证
}
function showResponse(responseText,statusText){
    // dataType=xml
    var name=$("name",responseXML).text();
    var address=$("address",responseXML).text();
    $("#xmlout").html(name+" "+address);
    // dataType=json
    $("#jsonout").html(data.name+" "+data.address);
}

Empfohlenes Lernen: „JQuery-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWas ist jquery.form.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：jquery lt was bedeutet das?Nächster Artikel：jquery lt was bedeutet das?

In Verbindung stehende Artikel

Mehr sehen