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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
js动态设置div的值下例子
Oct 29 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
理解javascript正则表达式
2016/03/08 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python 把列表转化为字符串的方法
2018/10/23 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
酒店出纳岗位职责
2013/12/29 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
校庆活动方案
2014/03/31 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
团员个人总结
2015/02/26 职场文书
初中重阳节活动总结
2015/05/05 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
单位同意报考证明
2015/06/17 职场文书
父亲去世追悼词
2015/06/23 职场文书