如何理解jQuery中的ajaxSubmit方法


Posted in Javascript onMarch 13, 2017

刚刚学习中,使用到了ajaxSubmit,犹豫以前没有接触㢧这个,所以刚开始是一脸懵逼状态,最后通过查找资料的方式,解决了这个问题这个很兴奋,做到了页面的无刷新上传图片,送给看我博客园的朋友一句话:“山高人为峰,努力定成功!”

下面我对ajaxSubmit做一下总结:

1.jQuery引入进去;

2.网上下载jQuery Form插件;

(这里对form插件做一下介绍,因为刚开始做前端的人不一定能懂,

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。

下载地址: http://malsup.com/jquery/form/#download

核心方法 -- 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 

    //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。


}
<!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");
    $("#AddDiglogDiv form").ajaxSubmit({
     url: '/ActionInfo/UploadImg',
     type: "Post",
     success: function (data) {
      alert("ccccc");
      //将返回的数据加载到隐藏域
      $("#IconImg").val(data);
      $("#ShowImgDiv").html("<img src='" + data + "' style='width:100px; height:80px'/>");
     }
    });
   });
  }

HTML代码是这样的:

<body>
 <!-------------添加对话框 start--------------------->
 <div id="AddDiglogDiv">
  @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" />
      <div id="ShowImgDiv"></div>
     </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>
  }
 </div>
 <!-------------添加对话框 end --------------------->
</body>
</html>

最终要完成的项目是这样的:

如何理解jQuery中的ajaxSubmit方法

最终我成功的实现了异步无刷新上传图片的功能!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
js实现小时钟效果
Mar 25 Javascript
Node.js调试技术总结分享
Mar 12 #Javascript
JavaScript中双符号的运算详解
Mar 12 #Javascript
利用Node.js对文件进行重命名
Mar 12 #Javascript
纯js的右下角弹窗实例
Mar 12 #Javascript
彻底学会Angular.js中的transclusion
Mar 12 #Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 #Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 #Javascript
You might like
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php中使用sftp教程
2015/03/30 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python妙用之编码的转换详解
2017/04/21 Python
Python中import机制详解
2017/11/14 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
十八大闭幕感言
2014/01/22 职场文书
环保倡议书怎么写
2014/05/16 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
导游词之张家口
2019/12/13 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL