浅谈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 相关文章推荐
js事件(Event)知识整理
Oct 11 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
vue实现简单的日历效果
Sep 24 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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的异常处理类Exception的使用及说明
2012/06/13 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
Python re模块介绍
2014/11/30 Python
python分析网页上所有超链接的方法
2015/05/08 Python
tensorflow更改变量的值实例
2018/07/30 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
员工安全承诺书
2014/05/22 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
新闻稿件写作范文
2015/07/18 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
实用求职信模板范文
2019/05/13 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python