jquery ajax异步提交表单数据
使用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异步提交表单数据的更多相关文章
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
- jquery ajax异步提交表单数据的方法
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- 使用ajax异步提交表单
虽然这篇文章的标题是提交表单,但是主要的难点在于使用ajax提交文本域的内容, 在工作中的经常会需要ajax跨域的问题,通常的需求使用jsonp就可以得到解决,但是当前项目中有一个图片服务器,客户端需 ...
- MVC之AJAX异步提交表单
第一种用法: 在MVC中,依然可以使用ajax校验,跟在WebForm中的使用时一样的,唯一的区别就是将以前的URL路劲改为访问控制器下的行为 前台 <html> <head> ...
- 使用AJAX异步提交表单的几种方式
方式一 手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', u ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- 使用jQuery实现跨域提交表单数据
我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQue ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...
- jQuery.form.js jQuery ajax异步提交form
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...
随机推荐
- .Net Core+Vue.js+ElementUI 实现前后端分离
.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...
- [翻译] LLSimpleCamera
LLSimpleCamera https://github.com/omergul123/LLSimpleCamera LLSimpleCamera is a library for creating ...
- python 下字符串格式时间比较
python 下有多个有关时间的模块,分别是time.datetime.calendar,今天重点讨论下time写法. 其中time模块,主要有以下方法: ltime=time.time() 获取当前 ...
- vue弹出框的封装
依旧是百度不到自己想要的,就自己动手丰衣足食 弹出框做成单独的组件confirm.vue; <template> <transition name="mask-bg-fad ...
- 奇怪的.strip(alir) #()里面有东西 待问老师........
#关于strips = "alirrijgbskbbbbbar"s1 = s.strip("alir") # strip 去空格,strip(sth),括号里有 ...
- 02-urllib库的get请求方式
对于urllib中的get请求方式,可以直接传入url的连接即可访问页面,但是对于要传入关键字的话,也可以用quote进行编码再传入. 案例如下: #get请求搜索参数如何添加 import urll ...
- 数据结构&堆&heap&priority_queue&实现
目录 什么是堆? 大根堆 小根堆 堆的操作 STL queue 什么是堆? 堆是一种数据结构,可以用来实现优先队列 大根堆 大根堆,顾名思义就是根节点最大.我们先用小根堆的建堆过程学习堆的思想. 小根 ...
- Uva1395 POJ3522 Slim Span (最小生成树)
Description Given an undirected weighted graph G, you should find one of spanning trees specified as ...
- 自定义ClassLoader
自定义classloader MapleClassLoader package com.maple; import java.io.*; public class MapleClassLoader e ...
- BZOJ4802:欧拉函数(Pollard-Rho,欧拉函数)
Description 已知N,求phi(N) Input 正整数N.N<=10^18 Output 输出phi(N) Sample Input 8 Sample Output 4 Soluti ...