浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用


Posted in Javascript onSeptember 09, 2016

• 依赖的脚本文件

<script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="../Javascript/jquery.form.js" type="text/javascript"></script>

• ajaxSubmit 和ajaxForm区别

ajaxForm

ajaxForm()不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始

ajaxForm()适用于以表单提交方式处理ajax技术(需要提供表单的action、id、 method,最好在表单中提供submit按钮)它大大简化了使用ajax技术提交表单时的数据传递问题,使用ajaxForm()你不需要逐个的以 JavaScript的方式获取每个表单属性的值,并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中每个属性的值,然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全,并且使用起来更简单,不必写过多冗余的JavaScript代码

ajaxSubmit

ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

ajaxSubmit()适用于以事件的机制以ajax提交form表单(超链接、图片的click事件),该方法作用与ajaxForm()类似,但它更为灵活,因为他依赖于事件机制,只要有事件存在就能使用该方法。你只需指定该form的action属性即可,不需要提供submit按钮。

• 示例代码

<!--HTML-->
  <form id="form1" name="form1">
    <input id="userName" name="userName" value="姓名" />
    <input id="age" name="age" value="30" />
    <input type="submit" value="submit" />
  </form>
  <input id="myButton" type="button" value="提交" />
  <!--javascript-->
  <script type="text/javascript">

    var myData = {
      "CnName": "周佳良",
      "EnName":"zhoujl"
    };
    $(function () {
      var ajaxFormOption = {
        type: "post", //提交方式 
        dataType: "json", //数据类型 
        data: myData,//自定义数据参数,视情况添加
        url: "TestHandler.ashx?type=ajaxForm", //请求url 
        success: function (data) { //提交成功的回调函数 
          document.write("success");
        }
      };

      //form中有submit按钮——方式1
      $("#form1").ajaxForm(ajaxFormOption);

      //form中有submit按钮——方式2
      $("#form1").submit(function () {
        $(this).ajaxSubmit(ajaxFormOption);
        return false;
      });

      //不需要submit按钮,可以是任何元素的click事件
      $("#myButton").click(function () {
        $("#form1").ajaxSubmit(ajaxFormOption);
        return false;
      });

    });
  </script>

以上这篇浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 #Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 #Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 #Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 #Javascript
jQuery子元素过滤选择器用法示例
Sep 09 #Javascript
老生常谈JQuery data方法的使用
Sep 09 #Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 #Javascript
You might like
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python入门教程 python入门神图一张
2018/03/05 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
django 消息框架 message使用详解
2019/07/22 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
组织关系转移介绍信
2014/01/16 职场文书
高中军训感言400字
2014/02/24 职场文书
新闻编辑求职信
2014/04/09 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
详解MySQL 联合查询优化机制
2021/05/10 MySQL