前言:这是一篇关于form提交数据的文章,ajax由jQuery提供
form表单提交
一、form是HTML的一个标签,用来向服务端发送数据。form元素有自己的属性,这里要讲的是form的enctype,method,action这三个属性
enctype:表示的是当method=”post”时候,form将数据提交给服务器端的MIME类型可能取值有以下三种
-
application/x-www-form-urlencoded
:未制定格式的默认格式 -
multipart/form-data
:用于type属性值设为file的input
标签 text/plain(html5)
-
2.method:表示指定浏览器用那种http方式提交form,可能值有
- post:指的是HTTP post方法,表单数据会包含在表单体内部提交给服务器端
- get:指的是HTTP get方法,表单数据会附加在action属性的URI中,并以
?
作为分隔符,得到这样的URI在提交给服务器端,数据暴露在URI中
3.action: 处理当前form信息所在的URL
利用上述属性发送表单数据至服务器端
二、实践一
HTML code
<div class="wrap">
<form action="demo.php" method="post" id="demoForm">
<input type="text" name="name">
<input type="password" name="password">
<input type="text" name="else">
<input type="reset" value="取消">
<input type="submit" value="提交" onclick="demo();return false;">
</form>
</div>
demo.php接收数据进行处理
JavaScript code
<script >
function demo(){
var data = $('#demoForm').serialize();
$.ajax({
url:"demo.php",
type:"post",
data:data,
dataType:"json",
success:function(res){
// 成功回调函数
},
error:function(xhr){
// 失败回调函数
}
});
}
</script>
三、实践二
当前存在input元素的type类型是file
HTML code
<div class="wrap">
<form action="demo.php" method="post" id="demoForm" enctype="multipart/form-data">
<input type="text" name="name">
<input type="password" name="password">
<input type="file" name="file">
<input type="reset" value="取消">
<input type="submit" value="提交" onclick="demo();return false;">
</form>
</div>
JavaScript code
<script >
function demo(){
var data = new FormData($('#demoForm')[0]);
$.ajax({
url:"demo.php",
type:"post",
data:data,
dataType:"json",
cache:false,
contentType:false,
processData:false,
success:function(res){
// 成功回调函数
},
error:function(xhr){
// 失败回调函数
}
});
}
</script>