浅谈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链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
动态加载js文件简单示例
Apr 21 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
js实现计时器秒表功能
Dec 16 Javascript
Openlayers实现测量功能
Sep 25 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
用Python编写web API的教程
2015/04/30 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python实现分数序列求和
2020/02/25 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
十岁生日家长答谢词
2014/01/17 职场文书
经济担保书范文
2014/04/02 职场文书
学生保证书范文
2014/04/28 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
离婚协议书范文2014
2014/10/16 职场文书
写给老师的感谢信
2015/01/20 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Python echarts实现数据可视化实例详解
2022/03/03 Python
Redis 异步机制
2022/05/15 Redis