共计 1558 个字符，预计需要花费 4 分钟才能阅读完成。
前言：这是一篇关于 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>
