前言:這是一篇關於form提交數據的文章,ajax由jQuery提供php
1、form是HTML的一個標籤,用來向服務端發送數據。form元素有本身的屬性,這裏要講的是form的enctype,method,action這三個屬性html
enctype:表示的是當method="post"時候,form將數據提交給服務器端的MIME類型可能取值有如下三種html5
application/x-www-form-urlencoded
:未制定格式的默認格式multipart/form-data
:用於type屬性值設爲file的input
標籤text/plain(html5)
2.method:表示指定瀏覽器用那種http方式提交form,可能值有ajax
?
做爲分隔符,獲得這樣的URI在提交給服務器端,數據暴露在URI中3.action: 處理當前form信息所在的URLjson
利用上述屬性發送表單數據至服務器端瀏覽器
2、實踐一
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接收數據進行處理app
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>
3、實踐二
當前存在input元素的type類型是filepost
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>