使用 jQuery 替换 XMLHttpRequest答案

【问题标题】：Use jQuery to replace XMLHttpRequest使用 jQuery 替换 XMLHttpRequest
【发布时间】：2010-09-11 09:14:15
【问题描述】：

我对 JavaScript 库很陌生。我想用 jQuery 替换我当前的代码。我当前的代码如下所示：

var req;

function createRequest() {
   var key = document.getElementById("key");
   var keypressed = document.getElementById("keypressed");
   keypressed.value = key.value;
   var url = "/My_Servlet/response?key=" + escape(key.value);
   if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   req.open("Get", url, true);
   req.onreadystatechange = callback;
   req.send(null);
}

function callback() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var decimal = document.getElementById('decimal');
         decimal.value = req.responseText;
      }
   }
   clear();
}

我想用 jQuery 之类更友好的代码替换我的代码

$.get(url, callback);

但是它没有调用我的回调函数。

我还想连续调用一个名为createRequest 的函数。 jQuery 有一个很好的方法吗？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

$.get(url, {}, callback);

应该可以解决问题。您的回调可以这样简化：

function callback(content){
    $('#decimal').val(content);
}

甚至更短：

$.get(url, {}, function(content){
    $('#decimal').val(content);
});

总而言之，我认为这应该可行：

function createRequest() {
    var keyValue = $('#key').val();
    $('#keypressed').val(keyValue);
    var url = "/My_Servlet/response";
    $.get(url, {key: keyValue}, function(content){
        $('#decimal').val(content);
    });
}

【讨论】：

【解决方案2】：

取出 readyState 和 status 检查。 jQuery 仅在成功时调用您的回调。为您的回调提供了参数(data, textStatus)，因此您应该使用data 而不是req.responseText。

window.setTimeout() 正如另一个答案所建议的那样，不会做你想做的事 - 只会等待然后调用你的函数一次。你需要改用window.setInterval()，它会定期调用你的函数，直到你取消它。

所以，总结一下：

var interval = 500; /* Milliseconds between requests. */
window.setInterval(function() {
    var val = $("#key").val();
    $("#keypressed").val(val);
    $.get("/My_Servlet/response", { "key": val }, function(data, textStatus) {
        $("#decimal").val(data);
    });
}), interval);

【讨论】：

【解决方案3】：

我不认为 jQuery 实现了超时功能，但是普通的旧 javascript 做得很好:)

【讨论】：

【解决方案4】：

根据the docs，jQuery.get 的参数是url, data, callback，而不是url, callback。

在回调函数结束时调用 JavaScript 的 setTimeout 函数应该足以让它持续执行。

【讨论】：

随你喜欢。如果您不需要任何传递，请使用 NULL，否则您可能会移动 key=?从查询字符串到数据参数。有关示例代码，请参阅文档。
"data" 是将发送到服务器的键/值对。此外，docs.jquery.com/Ajax/jQuery.get 的示例显示了省略数据参数的调用。
嗯...我试过 url = "/My_Servlet/response"; jQuery.get(url, "key=" + escape(key.value), 回调);仍然不会调用回调函数。
如果callback是未定义的并且data是一个函数，jQuery会自动交换参数。
setTimeout() 调用一次函数。当您想要一次又一次地调用某些东西时，setInterval() 是正确的函数。

【解决方案5】：

不需要在 URL 上设置 GET 参数，jQuery 会自动设置它们。试试这个代码：

var key = document.getElementById("key");
[...]
var url = "/My_Servlet/response";
$.get (url, {'key': key}, function (responseText)
{
    var decimal = document.getElementById ('decimal'); 
    decimal.value = responseText;
});

【讨论】：

【解决方案6】：

最后我猜是添加了类型。这似乎对我有用。

  function convertToDecimal(){ 
    var key = document.getElementById("key"); 
    var keypressed = document.getElementById("keypressed"); 
    keypressed.value = key.value; 
    var url = "/My_Servlet/response?key="+ escape(key.value);
    jQuery.get(url, {}, function(data){
       callback(data);}
       , "text" );
  }

  function callback(data){
    var decimal = document.getElementById('decimal');
    decimal.value = data;
    clear();
  }

感谢大家的帮助。我会投票给你。

【讨论】：