• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery ajax提交Form表单实例(附demo源码)

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

作者:xiao张 字体:[增加 减小] 来源:互联网

xiao张 通过本文主要向大家介绍了jQuery,ajax提交,Form表单等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
  • JQuery中节点遍历方法实例
  • 浅谈Jquery为元素绑定事件
  • jQuery选择器实例应用
  • jQuery实现切换页面过渡动画效果
  • Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
  • 关于Jquery操作Cookie取值错误的解决方法
  • 简洁实用的BootStrap jQuery手风琴插件
  • Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
  • 基于jQuery实现Div窗口震动特效代码-代码简单

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 浅谈jquery的map()和each()方法
    • 使用jQuery.form.js/springmvc框架实现文件上传功能
    • jQuery mobile 移动web(6)
    • Jquery实现鼠标移动放大图片功能实例
    • jquery内置验证(validate)使用方法示例(表单验证)
    • jQuery取id有.的值的方法
    • jQuery实现购物车计算价格功能的方法
    • jquery弹出框的用法示例(一)
    • 浅析jquery与checkbox的checked属性的问题
    • jQuery多媒体插件jQuery Media Plugin使用详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有