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面向对象包装类Class封装类库剖析
Jan 24 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
JS实现盒子拖拽效果
2020/02/06 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python匹配中文的正则表达式
2016/05/11 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python读取中文txt文本的方法
2018/04/12 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python字典的遍历3种方法详解
2019/08/10 Python
python编写简单端口扫描器
2019/09/04 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
django实现日志按日期分割
2020/05/21 Python
Python编写单元测试代码实例
2020/09/10 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
实习自荐信
2013/10/13 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
个人四风对照检查材料
2014/09/26 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL