剛剛學習中,使用到了ajaxSubmit,猶豫以前沒有接觸㢧這個,所以剛開始是一臉懵逼狀態,最後通過查找資料的方式,解決了這個問題這個很興奮,做到了頁面的無刷新上傳圖片,送給看我博客園的朋友一句話:「山高人為峰,努力定成功!」
#下面我對ajaxSubmit做一下總結:
#1.jQuery引入進去;
2.網上下載jQuery Form外掛;
這裡對form外掛做介紹,因為剛開始做前端的人不一定能懂,jQuery Form插件是一個優秀的Ajax表單插件,可以非常輕鬆地、無侵入地升級HTML表單以支援Ajax。
jQuery Form有兩個核心方法 -- ajaxForm() 和 ajaxSubmit(), 它們集合了從控製表單元素到決定如何管理提交程序的功能。
另外,插件還包含其他的一些方法:
formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和resetForm ()等。
核心方法:ajaxForm() 和ajaxSubmit()
#3.首先說用法,ajaxForm和ajaxSubmit都可以接收0或1個參數,該參數可以是一個變數、一個物件或回呼函數,這個物件主要有以下參數:
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.解決IE下AjaxSubmit上傳檔案提示下載檔案問題
2.怎麼用AjaxSubmit()提交file檔案
3.如何解決JQuery ajaxSubmit提交中文亂碼
##相關影片推薦:1.
獨孤九賤(6 )_jQuery影片教學2.
AJAX基礎影片教學
以上是jQuery中的ajaxSubmit詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!