ホームページ >ウェブフロントエンド >フロントエンドQ&A >jquery.form.jsとは何ですか

jquery.form.jsとは何ですか

藏色散人オリジナル: 2021-11-11 10:51:371729ブラウズ

jquery.form.jsは、ajaxフォーム送信とajaxファイルアップロードをサポートするフォームプラグインで、参照メソッドは「31ebc49106c326ad60526dd4514ea1d99429d6e1efad07153846e528605c447e」。

#この記事の動作環境: Windows7 システム、jquery1.6.2 バージョン、DELL G3 コンピューター

jquery とは。フォーム.js?

jQuery.form.js の使用法

jQuery.form.js は、Ajax フォームの送信と Ajax ファイルのアップロードをサポートするフォームプラグインです。

<!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	必要なイベントリスナーをすべて追加して、フォームの Ajax 送信の準備をします。 ajaxForm はフォームを送信できません。ドキュメントのready関数で、ajaxFormを使用してフォームのajax送信を準備します。	0 または 1 個のパラメータを受け入れます。パラメーターには、コールバック関数またはオプションオブジェクトを指定できます。	$("#formid").ajaxForm();
ajaxSubmit	ajax を使用してフォームを送信します。	0 または 1 個のパラメータを受け入れます。パラメーターには、コールバック関数またはオプションオブジェクトを指定できます。	$("#formid").ajaxSubmit(); or $("#formid").submit(function(){ $(this).ajaxSubmit(); return false; });
formSerialize	フォームをクエリ文字列にシリアル化 (またはシリアル化) します。このメソッドは、name1=value1&name2=value2 の形式で文字列を返します。	None	$("#formid").formSerialize();
fieldSerialize	のフィールド要素を文字列化します。 form クエリ文字列に行化 (またはシリアル化) します。これは、一部のフォームフィールドのみをシリアル化 (またはシリアル化) する必要がある場合に便利です。 name=value1&name2=value2 の形式で文字列を返します。	None	$("#formid .specialFields").fieldSerialize();
#fieldValue	一致する挿入配列を返します。のフォーム要素値。このメソッドは配列形式でデータを返します。要素値が無効である可能性があると判断された場合、配列は空になります。	None	$("#formid :password").fieldValue();
resetForm	フォームを復元します初期状態。	None	$("#formid").resetForm();
clearForm	フォーム要素をクリアします。このメソッドは、すべてのテキスト、パスワード、およびテキストエリアを空にし、select 要素の選択をクリアし、すべてのラジオボタンとチェックボックスボタンを選択されていない状態にリセットします。	None	$("#formid").clearForm();
clearFields	フィールド要素をクリアします。一部のフォーム要素のみをクリアする必要がある場合に便利です。	None	$("#formid .specialFields").clearFields();

Options オブジェクト

両方ajaxForm と ajaxSubmit は、Options オブジェクトを使用して提供できる多数のオプションパラメーターをサポートしています。

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);
}

target	サーバーに応答して更新されるページ内の要素を示します。要素の値は、jQuery セレクター文字列、jQuery オブジェクト、または DOM 要素として指定できます。	デフォルト値: null
url	フォームデータを送信するための URL を指定します。	デフォルト値: フォームの action 属性値
type	フォームデータを送信する方法を指定します: "GET" または "POST" 「。」	デフォルト値: GET
beforeSubmit	フォームが送信される前に呼び出されるコールバック関数。コールバック関数が false を返した場合、フォームは送信されません。コールバック関数は、配列形式のフォームデータ、jQuery フォームオブジェクト、および ajaxForm/ajaxSubmit で渡される Options オブジェクトの 3 つの呼び出しパラメータを取ります。	デフォルト値: null
success	フォームが正常に送信された後に呼び出されるコールバック関数。次に、dataType オプションの値によって、responseText の値が返されるか、responseXML の値が返されるかが決まります。	デフォルト値: null
dataType	返されるデータ型: null、「xml」、「script」、「json」のいずれか。	デフォルト値: null
resetForm	フォームが正常に送信された場合にリセットするかどうかを示します。	デフォルト値: null
clearForm	フォームが正常に送信された場合にフォームデータをクリアするかどうかを示します。

推奨学習: 「

jquery ビデオチュートリアル」

以上がjquery.form.jsとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jquery lt それはどういう意味ですか次の記事：jquery lt それはどういう意味ですか

続きを見る