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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
Javascript学习指南
Dec 01 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Python实现决策树C4.5算法的示例
2018/05/30 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
Python持续监听文件变化代码实例
2020/07/22 Python
python如何实现递归转非递归
2021/02/25 Python
工商企业管理应届生求职信
2013/11/03 职场文书
总务岗位职责
2013/11/19 职场文书
主题教育活动总结
2014/05/05 职场文书
施工安全承诺书
2014/05/22 职场文书
应届毕业生自荐信
2014/05/28 职场文书
班组拓展活动方案
2014/08/14 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
尼克胡哲观后感
2015/06/08 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书