ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryのajaxSubmitの詳しい説明
jQueryのajaxSubmitの詳しい説明
- 小云云オリジナル
- 2018-05-14 10:43:5116655ブラウズ
私は勉強中に ajaxSubmit を使用したばかりで、これまでに出会ったことがなかったので、最初は戸惑いましたが、最終的には、画像を更新せずにこの問題を解決しました。私のブログを読んでいる友人への言葉: 「山の高さが成功を決める!」 ajaxSubmit について以下にまとめます:
フロントエンドの作業を始めたばかりの人には理解できない可能性があるため、ここでフォーム プラグインについて説明します。jQuery Form プラグインは優れた Ajax です。 HTML フォームを簡単かつ非侵襲的にアップグレードして Ajax をサポートできるフォーム プラグイン。
jQuery Form には、ajaxForm() と ajaxSubmit() という 2 つのコア メソッドがあり、フォーム要素の制御から送信プロセスの管理方法の決定までの機能を組み合わせています。
さらに、プラグインには他のメソッドも含まれています:
:formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()、resetForm() など。
コアメソッド: ajaxForm() と ajaxSubmit()
3. まず使用方法について説明します。ajaxForm と ajaxSubmit は両方とも、変数、オブジェクト、またはコールバック関数を受け取ることができます。主に次のパラメータがあります:var object= { url:url, //form提交数据的地址 type:type, //form提交的方式(method:post/get) target:target, //服务器返回的响应数据显示的元素(Id)号 beforeSerialize:function(){} //序列化提交数据之前的回调函数 beforeSubmit:function(){}, //提交前执行的回调函数 success:function(){}, //提交成功后执行的回调函数 error:function(){}, //提交失败执行的函数 dataType:null, //服务器返回数据类型 clearForm:true, //提交成功后是否清空表单中的字段值 restForm:true, //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态 timeout:6000 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。 }推奨マニュアル
1.
AJAX中国語リファレンスマニュアル2.jQuery中国語リファレンスマニュアル<!DOCTYPE html> <html> <head> <title>权限信息展示 </title> <link href="~/Content/JqueryEasyUi/themes/default/easyui.css" rel="external nofollow" rel="stylesheet" /> <link href="~/Content/JqueryEasyUi/themes/icon.css" rel="external nofollow" rel="stylesheet" /> <script src="~/Content/JqueryEasyUi/jquery-1.8.3.min.js"></script> <script src="~/Scripts/myjqueryform.js"></script>//这里引入 <script src="~/Content/JqueryEasyUi/jquery.easyui.min.js"></script> <script src="~/Content/JqueryEasyUi/locale/easyui-lang-zh_CN.js"></script> <script src="~/Scripts/datapattern.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <script type="text/javascript"> $(function () { //绑定异步上传图片 bindUpLoad(); }); //绑定异步上传图片 function bindUpLoad() { alert("aaaaa"); $("#btnUpLoadFile").click(function () { alert("bbbbb"); $("#AddDiglogp form").ajaxSubmit({ url: '/ActionInfo/UploadImg', type: "Post", success: function (data) { alert("ccccc"); //将返回的数据加载到隐藏域 $("#IconImg").val(data); $("#ShowImgp").html("<img src='" + data + "' style='width:100px; height:80px'/>"); } }); }); }
HTMLコードは次のようになります:<body> <!-------------添加对话框 start---------------------> <p id="AddDiglogp"> @using (Ajax.BeginForm("AddActionInfo", "ActionInfo", new AjaxOptions() { OnSuccess = "afterAdd" })) { <table> <tr> <td>权 限 名：</td> <td> <input type="text" name="ActionName" /></td> </tr> <tr> <td>Url：</td> <td> <input type="text" name="Url" /></td> </tr> <tr> <td>Http方法类型：</td> <td> <select name="HttpMethod"> <option value="GET">GET</option> <option value="POST">POST</option> </select> </td> </tr> <tr> <td>是否是菜单：</td> <td> <input type="checkbox" id="ckbIsMenuShow" value="true" name="IsMenu" /></td> </tr> <tr id="trMenuAdress"> <td>菜单图片地址：</td> <td> <input type="hidden" id="IconImg" name="IconImg" /> <input type="file" id="fileMenuIcon" name="fileMenuIcon" /> <input type="button" value="上传" id="btnUpLoadFile" /> <p id="ShowImgp"></p> </td> </tr> <tr> <td>排 序：</td> <td> <input type="text" name="Sort" /></td> </tr> <tr> <td>备 注：</td> <td> <input type="text" name="Remark" /></td> </tr> </table> } </p> <!-------------添加对话框 end ---------------------> </body> </html>完成する最終プロジェクトは次のようなものです:
ついに、画像を更新せずに非同期でアップロードする機能を実装することに成功しました。
おすすめ関連記事: 
1.
2.
AjaxSubmit()を使用してファイルを送信する方法3.
中国語の問題を解決する方法JQuery ajaxSubmit によって送信された文字化けしたコード
関連ビデオの推奨事項:1.
Dugu Jiijian (6)_jQuery ビデオ チュートリアル2.
AJAX 基本ビデオ チュートリアル
以上がjQueryのajaxSubmitの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。