使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的;

处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据包括文件流的话,就需要使用 FormData对象:

不带文件的表单数据使用:var data = $(form).serialize();

带文件的表单数据使用:   var  data = new FormData($(form)[0]);

一、不上传文件的ajax提交数据:

1、用serialize()方法序列化form表单提交参数

html:form表单

 <form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post">
<input type="text" name="name" placeholder="请输入名字" />
<input type="password" name="password" placeholder="密码"/>
</form>
<button type="button" id="submitAdd">确认</button>

jquery 异步处理

  $("#submitAdd").click(function(){

          var targetUrl = $("#addForm").attr("action");
var data = $("#addForm").serialize();
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:data,
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })

2、用data{}格式的方法提交data参数

html,form表单:

<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post">
<input type="text" id="name" name="name" placeholder="请输入名字" />
<input type="password" id="password" name="password" placeholder="密码"/>
</form>
<button type="button" id="submitAdd">确认</button>

Jquery 异步处理:

$("#submitAdd").click(function(){

          var targetUrl = $("#addForm").attr("action");
var userName =$("#name").val();
var pd= $("#passwrod").val();
//创建数组
var array = new Array();
//往数组添加数据
array.push('hello');
array.push('world');
$.ajax({
type:'post',
url:targetUrl,
cache: false,
data:{"name":userName,"password":pd,"array[]":array}, //注意,传递数组参数时,参数名需要加上[],如 "array[]",否则后台获取不了
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })

二、上传文件的ajax提交数据:

1、用<form>表单来构建FormData对象:

 html:form表单

 注意:有文件上传的form表单需要在<form>标签里加入 enctype="multipart/form-data"属性 :

<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post"enctype="  multipart/form-data">
<input type="text" name="name" placeholder="请输入名字" />
<input type="password" name="password" placeholder="密码"/>
<input type="file" name="avatar" />
</form>
<button type="button" id="submitAdd">确认</button>

jquery 异步处理

$("#submitAdd").click(function(){

          var targetUrl = $("#addForm").attr("action");
var data = new FormData($( "#addForm" )[0]);
$.ajax({
type:'post',
url:targetUrl,
cache: false, //上传文件不需缓存
processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
data:data,
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })

2、如果不用<form>表单构建FormData对象的处理方法如下:

html:没有form表单

<div id="uploadFile">
<input id="file" name="avatar" type="file"/>
<button id="upload" data-url="/admin/upload" type="button">上传头像</button>
</div>

jquery异步处理:

$("#upload").click(function(){

          var targetUrl = $(this).attr("data-url");
var data = new FormData();
//FormData对象加入参数
data.append('file', $('#file')[0].files[0]); //'file' 为参数名,$('#file')[0].files[0])获取上传的文件,如果需上传多个文件,要在<input>标签加上属性multiple
$.ajax({
type:'post',
url:targetUrl,
cache: false,
processData: false,
contentType: false,
data:data,
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })

补充说明:

注意:需要调用函数返回值时,需要为ajax设置 async : false,否则ajax返回值将异步,导致函数返回不到ajax里面的返回值;

具体如下:

 //校验验证码
function validateCode(){
var result ;
var validateCode = $("#validateCode").val();
var validateCodeUrl =$("#validateCode").attr("data-validate");
$.ajax({
type:'get',
url :validateCodeUrl,
data:{'validateCode':validateCode},
dataType:'json',
async : false,
success:function(flag){
if(flag.valid==true){
$("#validateCode").removeClass("warn-border");
$("#small-warn").remove();
result =true;
return result ;
}
var tag ='<small id="small-warn" class="small-warn"><i class="fa fa-close"></i>请输入正确的验证码</small>'
$("#validateCode").addClass("warn-border");
$(".validate-img-code").after(tag);
result =false;
return result ;
},
error:function(){
alert("请求失败!")
}
})
return result ;
}

jquery ajax异步提交表单数据的更多相关文章

  1. ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  2. jquery ajax异步提交表单数据的方法

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  3. 使用ajax异步提交表单

    虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...

  4. MVC之AJAX异步提交表单

    第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...

  5. 使用AJAX异步提交表单的几种方式

    方式一 手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', u ...

  6. 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

  7. 使用jQuery实现跨域提交表单数据

    我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据.   在jQue ...

  8. jQuery.Form.js 异步提交表单使用总结

    jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...

  9. jQuery.form.js jQuery ajax异步提交form

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...

随机推荐

  1. Ubuntu做Tomcat服务:insserv: warning: script 'tomcat' missing LSB tags and overrides

    https://blog.csdn.net/hanchao5272/article/details/79819460 转载自:https://blog.bbzhh.com/index.php/arch ...

  2. Azure Document DB Repository 的实现

    阅读 需要大约  5 分钟. 前景: Azure Cosmos DB 由 Microsoft 提供,是全球分布式多模型数据库. 通过 Azure Cosmos DB 跨任意数量的 Azure 地理区域 ...

  3. 将Model对象转换成json文本或者json二进制文件

    将Model对象转换成json文本或者json二进制文件 https://github.com/casatwy/AnyJson 注意:经过测试,不能够直接处理字典或者数组 主要源码的注释 AJTran ...

  4. Python学习---Django的request.post源码分析

    request.post源码分析: 可以看到传递json后会帮我们dumps处理一次最后一字节形式传递过去

  5. Python学习---爬虫学习[scrapy框架初识]

    Scrapy Scrapy是一个框架,可以帮助我们进行创建项目,运行项目,可以帮我们下载,解析网页,同时支持cookies和自定义其他功能. Scrapy是一个为了爬取网站数据,提取结构性数据而编写的 ...

  6. ZT 输入一个字符串,查找它的第一个数字串,并返回其个数

    /*查找字符串中的数字串问题 输入一个字符串,查找它的第一个数字串,并返回其个数 */ #include <stdio.h> char firstnum(char *input,char ...

  7. ZT C语言链表操作(新增单向链表的逆序建立)

    这个不好懂,不如看 转贴:C语言链表基本操作http://www.cnblogs.com/jeanschen/p/3542668.html ZT 链表逆序http://www.cnblogs.com/ ...

  8. 0x01 现阶段目标

    现阶段目标: 1.完成前端知识基础的学习. 具体如下: 在目前学习的基础上(html,css,JavaScript+BOM基础已经大致了解).针对DOM进行学习,个人在http://how2j.cn? ...

  9. Jenkins 配合 GitLab 实现分支的自动合并、自动创建 Tag

    Jenkins 配合 GitLab 实现分支的自动合并.自动创建 Tag 背景 GitFlow工作流简介 Gitflow工作流定义了一个围绕项目发布的严格分支模型,它会相对复杂一点,但提供了用于一个健 ...

  10. [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取

    兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...