jquery表單應用

有必要擷取表單内各input元素的資料，然後用ajax方法以POST方式送出給伺服器。如果input元素有ID屬性，假設是<input

type=”text” name=”writer” id=”writer” />，可以這樣擷取：

var writervalue=$(”#writer”).val();

再來一個按扭吧，點選按鈕後POST到ok.php去。

<input name=”writer” id=”writer” type=”text” value=”writer”

/>

<input type=”submit” name=”button” id=”button” value=”送出” />

<script type=”text/javascript” src=”jquery.js”

mce_src=”jquery.js”></script>

<script

type=”text/javascript”>

$(document).ready(function(){        //DOM的onload事件處理函數

$(”#button”).click(function(){          //當按鈕button被點選時的處理函數

postdata();                                      //button被點選時執行postdata函數

});

function postdata(){                             //送出資料函數

$.ajax({                                                

//調用jquery的ajax方法

    type: “POST”,                                    

//設定ajax方法送出資料的形式

    url: “ok.php”,                                     

//把資料送出到ok.php

    data: “writer=”+$(”#writer”).val(),   

//輸入框writer中的值作為送出的資料

    success: function(msg){                

//送出成功後的回調，msg變量是ok.php輸出的内容。

      alert(”資料送出成功”);                    

//如果有必要，可以把msg變量的值顯示到某個DIV元素中

    }

  });

}

</script>

大功告成！假如輸入框很多，在ajax方法的data參數裡可以這樣表示：

data:”n1=&n2=&n3=…”

var data = $(”#myForm”).formToArray();

$.post( “ok.php”, data );

變量data事實上是個數組。變量通過jquery的post方法送出到ok.php。

看上去用post方法要比ajax方法省事。jquery的ajax方法是low-level（底層）處理機制，而post、get、方法則是higher-level（高層）處理機制，已經被封裝好了的，更容易了解和使用。但也有缺點，就是不能傳回更詳細的資訊，比如錯誤處理……