浅谈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实现分割提取页面所需内容
May 09 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
通过html表格发电子邮件
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
原生js实现分页效果
2020/09/23 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
家长寄语大全
2014/04/02 职场文书
档案信息化建设方案
2014/05/16 职场文书
公司捐书倡议书
2015/04/27 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
检讨书格式
2019/04/25 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS