Detailed explanation of ajaxSubmit in jQuery-JS Tutorial-php.cn

Detailed explanation of ajaxSubmit in jQuery

小云云

Release： 2019-11-26 09:29:08

Original

16660 people have browsed it

I was just learning and used ajaxSubmit. I hesitated because I had never been exposed to this before, so I was confused at first. Finally, I solved this problem by searching for information. I was very excited and uploaded the page without refreshing. Picture, I would like to give a sentence to friends who read my blog: "The mountain is high, and hard work will determine success!"

Let me summarize ajaxSubmit below:

1.Introduce jQuery;

2.Download the jQuery Form plug-in online;

Here is an introduction to the form plug-in, because people who are just starting to do front-end work may not understand it. , jQuery Form plug-in is an excellent Ajax form plug-in, which can easily and non-invasively upgrade HTML forms to support Ajax.

jQuery Form has two core methods - ajaxForm() and ajaxSubmit(), which combine functions from controlling form elements to deciding how to manage the submission process.

In addition, the plug-in also includes other methods:

formToArray(), formSerialize(), fieldSerialize(), fieldValue(), clearForm(), clearFields() and resetForm ()wait.

Core methods: ajaxForm() and ajaxSubmit()

3. Let’s talk about usage first. Both ajaxForm and ajaxSubmit can receive 0 or 1 parameter, which can be a variable, An object or callback function. This object mainly has the following parameters:

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 　　　　　 　 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。　　

}

Copy after login

Recommended Manual:
1.AJAX Chinese Reference Manual
2.jQuery Chinese Reference Manual

<!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=&#39;" + data + "&#39; style=&#39;width:100px; height:80px&#39;/>");
     }
    });
   });
  }

Copy after login

The HTML code is like this:

<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>

Copy after login

The final project to be completed is like this:

Finally, I successfully implemented the function of uploading images asynchronously without refreshing!

Recommended related articles:
1.Solving the problem of AjaxSubmit uploading files under IE prompts for downloading files
2.How to use AjaxSubmit() Submit file
3.How to solve JQuery ajaxSubmit to submit Chinese garbled characters
Related video recommendations:
1.Dugu Jiujian(6 )_jQuery video tutorial
2.AJAX basic video tutorial

The above is the detailed content of Detailed explanation of ajaxSubmit in jQuery. For more information, please follow other related articles on the PHP Chinese website!