使用jQuery进行不同输入变量的多个Ajax HTTP GET请求

Question

我想发起异步get请求，并根据我提供的每个输入来获取不同的结果。这是我的代码：

param=1;
$.get('http://localhost/my_page_1.php', param, function(data) {
   alert("id = "+param);
   $('.resul   5.t').html(data);
});

param=2;
$.get('http://localhost/my_page_2.php', param, function(data) {
   alert("id = "+param);
   $('.result').html(data);
});

两个请求的结果都是："id = 2" 我希望第一个请求的结果是："id = 1"，第二个请求的结果是："id = 2"。 我想在一个HTML文件中对许多请求进行此操作，并在它们准备好后将结果集成到HTML中。 有人能帮我解决这个问题吗？

- Thanasis Petsas

Answer 1

因为您的调用是异步的，所以回调函数直到上面的所有行都已运行才会执行。这意味着在您的第一个get请求解析之前，param将被设置为值2。

为您的变量创建唯一的名称，例如param1、param2，而不仅仅是重新分配param。

编辑：

请查看以下代码：

    for (var i = 0 ; i < 3; i++) {
        param = i;
        $.get('http://www.google.com',genCallback(param));
        param = i+5;
    }

    function genCallback(param) {
        var cb = function (data) {
            alert(param);
        }
        return cb;
    }

说实话，我不太确定它是如何工作的。你会注意到它以某种顺序警报数字0、1、2，即使我不断改变参数。我没有直接在get中创建匿名函数，而是根据参数创建一个函数。我认为会发生的事情是，在执行时，闭包将在cb上创建，其中包括genCallback时的局部参数。

- Fletcher Moore

---

如果您预先知道全部请求，那么使用数组是一个好主意。我已经编辑了我的答案，并提供了更加灵活的解决方案。 - Fletcher Moore

是的，我在看我的即将到来的考试时，一直在思考问题，直到找到解决方案为止。现在回到书本上！ - Simen Echholt

我不确定跨域阻止是如何工作的。似乎请求仍然被发送并返回结果，但浏览器本身会丢弃响应。如果您在Firefox中使用Live Headers，请查看我的脚本在此处向Google发出的请求：http://fletchermoore.me/test/。我的脚本代码位于http://fletchermoore.me/test/test.js。我将在我的答案中发布响应头。 - Fletcher Moore

是的，如果您通过代理进行请求，它将起作用，因为浏览器不会发出请求; 您的服务器正在发出请求。而且服务器可以做任何它想做的事情。 - Fletcher Moore

使用Wireshark，我确定了整个来自Google的响应已经发送，但似乎浏览器将其丢弃并给我一个空字符串。 - Fletcher Moore

Answer 2

当您调用 AJAX 函数时，该请求的回调与代码的其余部分不同步处理。在请求完成时指定的要调用的函数在...请求完成之前是不会调用的。

由于 AJAX 的异步性质，这是您的代码最常见的工作方式:

1. 设置 param = 1 并发送第一个 ajax 请求
2. 设置 param = 2 并发送第二个 ajax 请求
3. 第一次获取调用已完成。此调用的回调已被处理。现在您的 param 变量为 2
4. 第二个获取调用已完成。此调用的回调已被处理。现在您的 param 变量仍然为 2

解决方案是为每个调用使用不同的变量或在第一个调用的回调函数中增加 param 并发送第二个 ajax 调用。

- Simen Echholt

---

谢谢，我现在明白发生了什么！Fletcher Moore的解决方案有效，但我想将所有请求放在一个循环中，以便每个请求都是异步的，并且为每个请求提供不同的输出！这种实现方式可行吗？我能想象的一种解决方案是预先计算所有这些值并将它们存储在数组中，然后进行循环并使用相应的数组元素创建每个请求。还有其他建议吗？ - Thanasis Petsas