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 EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
js+css实现导航效果实例
Feb 10 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 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
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
Python import自定义模块方法
2015/02/12 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python实现密码强度校验
2020/03/18 Python
python如何保存文本文件
2020/06/07 Python
Python xlwt模块使用代码实例
2020/06/10 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
生日派对邀请函
2014/01/13 职场文书
期末评语大全
2014/05/04 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
Go语言 详解net的tcp服务
2022/04/14 Golang