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

jQuery ajax get与post后台交互中的奥秘的更多相关文章

  1. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

  2. jquery ajax跨域请求后台的简单例子

    一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...

  3. Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 使用Jquery.AJAX方法和PHP后台数据交互小结

    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...

  5. .Net中jQuery.ajax()调用asp.net后台方法 总结

    利用JQuery的$.ajax()调用.Net后台方法有多种方式, 不多说了  直接上代码 前台代码 <script type="text/javascript"> $ ...

  6. Javascript 中ajax实现前台向后台交互

    第一种情况:前台传入字符串参数 后台返回json字符串.或是json数组  代码如下: 前台: $.ajax({ url: "xxx/xxx.action", data: &quo ...

  7. JQuery Ajax调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: using System.Web.Scrip ...

  8. 前台jquery+ajax+json传值，后台处理完后返回json字符串，如何取里面的属性值？（不用springmvc注解）

    一.取属性值 前台页面: function select(id){ alert("hfdfhdfh"+id); $.ajax({ url:"selectByid.jsp& ...

  9. jQuery.ajax()调用asp.net后台方法

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.介意方法名不要重名 建一个WebFormAjax名aspx文件 CS <%@ Page Language=" ...

随机推荐

  1. 谷歌protobuf(protocol-buffers)各种开发语言数据类型转换说明

    官方文档:https://developers.google.cn/protocol-buffers/docs/proto proto2 proto3

  2. 缓存Bigkey坚决不要用，拆分是王道

    大家好,我是架构摆渡人.这是实践经验系列的第四篇文章,这个系列会给大家分享很多在实际工作中有用的经验,如果有收获,还请分享给更多的朋友. 背景介绍 在高并发的业务场景中,缓存是必须要上的,用来扛高并发 ...

  3. c/c++11封装UDP，支持ipv4和ipv6,支持接收和发送

    更新日志 11/06/2021 1.增加IPV6 2.ipv6通过windows10初步测试 3.ipv6包括: 接收和发送 5.增加错误代码接口 6.本机IPv6截图 7.编译通过截图 8.ipv6 ...

  4. 【LeetCode】1042. Flower Planting With No Adjacent 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 图 日期 题目地址:https://leetcode ...

  5. 【LeetCode】906. Super Palindromes 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS解法 相似题目 参考资料 日期 题目地址:ht ...

  6. leetcode1261在受污染的二叉树中查找元素

    题目 一颗二叉树,树根值为0,父节点为x,则左子值为2x+1,右子为2x+2.现在只有树的结构,所有值都变为-1被污染了.求污染前是否存在某个值. 构建一次树,查询会调用多次. 题解 这道题还是比较简 ...

  7. 【LeetCode】343. Integer Break 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 数学解法 动态规划 日期 题目地址:https:// ...

  8. 使用Xcode 制作自定义storyboard启动界面，供uniAPP使用。

    1新建项目 想要全屏显示并适应所有尺寸的iPad和iphone 需要用750*1624 2X 和 1125 * 2436 3X大小的图片 这里做完就可以导出文件了 把文件和图片放到一起 见下图 命名规 ...

  9. CS5213demoboard设计电路|DMI转VGA带II2S音频输出转接线|CS5213方案

    CS5213是台湾CAPSTONE瑞奇达推出的一款HDMI(高清多媒体接口)到VGA转换芯片. CS5213设计HDMI转VGA带II2S转接线产品特性: ◇将完整的HDMI信号转换为VGA输出◇支持 ...

  10. Capstone CS5213|HDMI转VGA|CS5213设计参考电路

    Capstone CS5213是一款HDMI到VGA转换器结合了HDMI输入接口和模拟RGB DAC输出且带支持片上音频数模转换器.CS5213芯片设计简单,整体芯片尺寸精悍,外围电路集成优化度较高, ...