jQuery ajax get与post后台交互中的奥秘
这两天在做关注功能模块(类似于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能够注意下，以免浪费很多不必要的时间...在不断的总结中学习，效果才是最好的。