jQuery中的ajaxSubmit詳解

剛剛學習中，使用到了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中文參考手冊

nbsp;html>


 <title>权限信息展示
 </title>
 <link>
 <link>
 <script></script>
 <script></script>//这里引入
 <script></script>
 <script></script>
 <script></script>
 <script></script>
 <script>
  $(function () {
   //绑定异步上传图片
   bindUpLoad();
  });
  //绑定异步上传图片
  function bindUpLoad() {
   alert("aaaaa");
   $("#btnUpLoadFile").click(function () {
    alert("bbbbb");
    $("#AddDiglogp form").ajaxSubmit({
     url: &#39;/ActionInfo/UploadImg&#39;,
     type: "Post",
     success: function (data) {
      alert("ccccc");
      //将返回的数据加载到隐藏域
      $("#IconImg").val(data);
      $("#ShowImgp").html("<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/054/025/acb67e7ebe827c4111f01d6f21485af9-0.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;" + data + "&#39; style=&#39;width:100px; height:80px&#39;/ alt="jQuery中的ajaxSubmit詳解" >");
     }
    });
   });
  }</script>

HTML程式碼是這樣的：

 <!-------------添加对话框 start--------------------->
 <p>
  @using (Ajax.BeginForm("AddActionInfo", "ActionInfo", new AjaxOptions() { OnSuccess = "afterAdd" }))
  {
   </p>

                                                                                                                                                             

权 限 名：
Url：
Http方法类型：	GET        POST
是否是菜单：
菜单图片地址：
排 序：
备 注：

  }    

最終要完成的專案是這樣的：

最終我成功的實現了非同步無刷新上傳圖片的功能！

相關文章推薦：
1.解決IE下AjaxSubmit上傳檔案提示下載檔案問題
2.怎麼用AjaxSubmit()提交file檔案
3.如何解決JQuery ajaxSubmit提交中文亂碼
##相關影片推薦：1.
獨孤九賤(6 )_jQuery影片教學2.
AJAX基礎影片教學

以上是jQuery中的ajaxSubmit詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！