jquery ajax异步提交表单数据的方法
2024-08-28 10:18:12
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的;
处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据包括文件流的话,就需要使用 FormData对象:
不带文件的表单数据使用:var data = $(form).serialize();
带文件的表单数据使用: var data = new FormData($(form)[0]);
一、不带文件的ajax提交数据:
html:form表单
<form id="addForm" action="/save/" 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, //重点必须为一个变量如:data
dataType:'json',
success:function(data){
alert('success');
},
error:function(){
alert("请求失败")
}
}) })
二、带文件的ajax提交数据:
html:form表单
有文件上传的form表单需要在<form>标签里加入 enctype="multipart/form-data"属性 :
<form id="addForm" action="/save/" 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("请求失败")
}
}) })
上面是用<form>表单来构建FormData对象,如果没有<form>表单处理方式如下:
html:没有form表单
<div id="uploadFile">
<input id="file" name="avatar" type="file"/>
<button id="upload" data-url="/admin/upload" type="button">上传头像</button>
</div>
$("#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("请求失败")
}
}) })
最新文章
- C/C++内存分配
- div加边框
- thrift之TTransport层的分帧传输类TFramedTransport
- Android 仿美团网,大众点评购买框悬浮效果之修改版
- python 自动化之路 day 05
- sql server 获取每一个类别中值最大的一条数据
- 简单的html5布局
- CodeForces 441 A. Valera and Antique Items
- HTTP必知必会(转)
- 双向bfs-八数码问题
- PAT1110:Complete Binary Tree
- 通过命令行操作MYSQL的方法 以及导入大的SQL备份文件
- Linux内核入门到放弃-内核活动-《深入Linux内核架构》笔记
- ADO.Net操作数据库的方式
- 剑指offer(28)数组中出现次数超过一半的数
- Linux mmc framework2:基本组件之queue
- for循环 while循环 break跳出循环 continue结束本次循环 exit退出整个脚本
- mybatis配置文件namespace用法总结
- 主席树模板(poj 2104&;&;poj2761)
- Asterist搭建步骤