」などです。"/> 」などです。">
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

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

jquery.form.jsとは何ですか

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

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

jquery.form.jsとは何ですか

#この記事の動作環境: 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 サーバーに応答して更新されるページ内の要素を示します。要素の値は、j​​Query セレクター文字列、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 それはどういう意味ですか

関連記事

続きを見る