zoukankan      html  css  js  c++  java
  • 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能够注意下,以免浪费很多不必要的时间...在不断的总结中学习,效果才是最好的。

  • 相关阅读:
    Android Studio 单刷《第一行代码》系列 05 —— Fragment 基础
    Android Studio 单刷《第一行代码》系列 04 —— Activity 相关
    Android Studio 单刷《第一行代码》系列 03 —— Activity 基础
    Android Studio 单刷《第一行代码》系列 02 —— 日志工具 LogCat
    Android Studio 单刷《第一行代码》系列 01 —— 第一战 HelloWorld
    IDEA 内网手动添加oracle,mysql等数据源,以及server returns invalid timezone错误配置
    eclipse maven设置
    IntelliJ IDE 常用配置
    eclipse maven 常见问题解决方案
    Maven 安装和配置
  • 原文地址:https://www.cnblogs.com/frlmoney/p/3144319.html
Copyright © 2011-2022 走看看