jQuery ajax提交Form表单实例(附demo源码)


Posted in Javascript onApril 06, 2016

本文实例讲述了jQuery ajax提交Form表单的方法。分享给大家供大家参考,具体如下:

Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。

如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢。

以前的处理方法

如Form代码如下:

<form id="Form1" action="action.aspx" method="post" >
名称:<input name="name" type="text" /><br />
密码:<input name="password" type="password" /><br />
手机:<input name="mobile" type="text" /><br />
说明:<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

当提交后,会跳转到action.aspx页面。并可以通过Request.Params["name"]可以取到值。

思考

如果不想刷新页面使用ajax,就又要在$.ajax中指定url,等信息,不好维护。

在网上查了一下,老早以前老外就有解决方案了。使用ajax直接按照Form信息直接提交。不刷新页面。

参考资料:http://jquery.malsup.com/form/

很好用,但我还是愿意自己写个自己用的。

核心JS代码

//将form转为AJAX提交
function ajaxSubmit(frm, fn) {
  var dataPara = getFormJson(frm);
  $.ajax({
    url: frm.action,
    type: frm.method,
    data: dataPara,
    success: fn
  });
}
//将form中的值转换为键值对。
function getFormJson(frm) {
  var o = {};
  var a = $(frm).serializeArray();
  $.each(a, function () {
    if (o[this.name] !== undefined) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
}

ajaxSubmit方法第一个参数,是要提交的form,第二个参数是ajax调用成功后的处理函数。

将form的action传递给ajax的url,form的method传递给ajax的type,再将格式化后的表单内容传递给data。

getFormJson方法将form的元素转化为json格式键值对。形如:{name:'aaa',password:'tttt'},注意将同名的放在一个数组里。

调用

//调用
$(document).ready(function(){
  $('#Form1').bind('submit', function(){
    ajaxSubmit(this, function(data){
      alert(data);
    });
    return false;
  });
});

在ajaxSubmit方法调用前,可验证数据是否正确,在alert(data)处可加入自己调用返回后处理代码。

在调用ajaxSubmit方法后,必须添加return false;语句防止Form真实提交。

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 #Javascript
JS控制伪元素的方法汇总
Apr 06 #Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 #Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 #Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 #Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 #Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 #Javascript
You might like
php的4种常用运行方式详解
2016/12/22 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
javascript+Canvas实现画板功能
2020/06/23 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python实现快速计算词频功能示例
2018/06/25 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
教育系毕业生中文求职信范文
2013/10/06 职场文书
小学生考试获奖感言
2014/01/30 职场文书
教师师德承诺书
2014/03/26 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
多人股份制合作协议书
2016/03/19 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL