jquery.form.jsは、ajaxフォーム送信とajaxファイルアップロードをサポートするフォームプラグインで、参照メソッドは「
#この記事の動作環境: 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 オブジェクトを使用して提供できる多数のオプション パラメーターをサポートしています。
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 フォームが正常に送信された場合にフォーム データをクリアするかどうかを示します。 推奨学習: 「var options={ target : '#output', // 把服务器返回的内容放入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); }ログイン後にコピーjquery ビデオ チュートリアル 」
以上がjquery.form.jsとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
関連ラベル:ソース:php.cnこのウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。著者別の最新記事
2023-04-24 11:00:01 2023-04-24 10:55:51 2023-04-24 10:52:44 2023-04-23 17:40:51 2023-04-23 17:38:02 2023-04-23 17:34:02 2023-04-23 10:15:45 2023-04-23 10:10:52 2023-04-21 16:01:59 2023-04-21 15:58:01最新の問題関連トピック詳細>人気のチュートリアル詳細>
高度な Web 開発 - jQuery27957最新のダウンロード詳細>