這兩天在做關注功能模塊(類似於Instagram)。多處頁面都需要通過一個“關注”按鈕進行關注或者取消該好友的操作。一個頁面對應的放一個按鈕，進行操作。效率低維護性差。因此想通過jQuery的ajax方法進行異步操作，效率高，見效快，將其封裝，只需要引用幾個JS文件，即可輕松的使用。因此最先想到了使用get方法。
首先引用jQuery類庫文件和json2.js(靠譜的家具，主要用來把后台返回給前台的字符串變成JSON對象。FF中不需要引用該文件，主要是在IE中，因為IE不支持JSON.parse方法)。
<!--[if IE]><script type="text/javascript" src="json2.js"></script><![endif]--> 使用該注釋只有IE能夠識別，目的就是為了在IE瀏覽器中引用json2.js，而其他瀏覽器中不對其進行引用。
按照如下代碼實現功能，具體遇到的坑爹問題稍后進行分析。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jQuery get與post奧秘</title> <script src="jquery-1.4.3.min.js" type="text/javascript"></script> <!--[if IE]><script type="text/javascript" src="json2.js"></script><![endif]--> <script type="text/javascript"> function FollowMeOperate() { //非常感謝key yao的耐心的解釋，緩存問題因此加上時間戳就可以使用get方法，由此完全可以證明之前我的推斷-都是緩存搞的鬼 $.get("FollowMeAJAX.aspx?t=" + new Date(), { followID: 429 }, function(data, action) { //$.post("FollowMeAJAX.aspx", { followID: 429 }, function(data, action) { //之前使用get請求時會發現第二次點擊按鈕時未觸發后台事件，因此被迫只能使用post請求 //$.get("FollowMeAJAX.aspx?Param=Operate", { followID: GetUrlParam("id") }, function(data, action) { var json = JSON.parse(data); if (json.success) { var link = $("#_linkFollow"); //改變狀態 if (link.text() == "[關注]") { link.text("[取消]"); } else { link.text("[關注]"); } } alert(json.msg); }); } </script> </head> <body> <form id="form1" runat="server"> <div> <a id="_linkFollow" href="javascript:FollowMeOperate();">[關注]</a> </div> </form> </body> </html>
后台調用返回測試JSON代碼(FollowMeAJAX.aspx):
protected void Page_Load(object sender, EventArgs e) { //用JQuery get post 進行回傳JSON格式時，必須使用正規的JSON 因此各個屬性值也需要用雙引號包起來，否則前台JQuery進行JSON讀取時會報錯 Response.Write("{\"success\":true,\"msg\":\"使用get只能與后台交互一次,使用post可以與后台交互多次!\"}"); Response.End(); }
如果將前台使用$.get方法你會發現每次點擊“關注”鏈接時都能正確的彈出對話框提示我們后台反饋回來的信息,不過不要被這種假象給蒙蔽了,坑爹現在才剛剛開始,在后台進行斷點跟蹤,我們會發現使用$.get方法時,當點擊鏈接第一次時,斷點會到后台處,可是當點擊1次以上的次數時,始終不會跳轉到后台去,但還總用假象來提示對話框,讓我們誤以為已經與后台交互過了.
當初我遇到的問題就是,前台明明提示我關注操作成功,可是數據庫中的字段卻並未修改(第一次操作除外).直到我將$.get方法替換為$.post方法時才解決問題.
草草的查了下資料，發現get會被緩存，而post不會被緩存，因此斷定，使用$.get方法時肯定是緩存在其中給我搗鬼，畢竟壓根就沒有與后台交互，你哪來的反饋信息給我？
希望大家在使用$.get與$.post能夠注意下，以免浪費很多不必要的時間...在不斷的總結中學習，效果才是最好的。