前言:这是一篇关于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类型是fileHTML 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>