浅谈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 相关文章推荐
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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 socket(fsockopen)的应用实例分析
2013/06/02 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PDO::errorInfo讲解
2019/01/28 PHP
农历与西历对照
2006/09/06 Javascript
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JS跨域总结
2012/08/30 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
介绍Python中几个常用的类方法
2015/04/08 Python
Django 静态文件配置过程详解
2019/07/23 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
10条PHP编程习惯
2014/05/26 面试题
2014年乡镇植树节活动方案
2014/02/28 职场文书
元旦联欢会感言
2014/03/04 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
小学五年级学生评语
2014/04/22 职场文书
2014年冬季防火方案
2014/05/21 职场文书
创先争优一句话承诺
2014/05/29 职场文书
公司应聘求职信
2014/06/21 职场文书
升职自荐信怎么写
2015/03/05 职场文书
银行实习推荐信
2015/03/27 职场文书
学生检讨书怎么写
2015/05/07 职场文书
小学教师教学随笔
2015/08/14 职场文书
大学生志愿者心得体会
2016/01/15 职场文书