浅谈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 混淆加密收藏
Jan 16 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php生成WAP页面
2006/10/09 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
Js基础学习资料
2010/11/23 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python 制作磁力搜索工具
2021/03/04 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
运动会跳远加油稿
2014/02/20 职场文书
建筑管理专业求职信
2014/07/28 职场文书
三下乡个人总结
2015/03/04 职场文书
党纪处分决定书
2015/06/24 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
Django实现聊天机器人
2021/05/31 Python
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
如何Python使用re模块实现okenizer
2022/04/30 Python