使用jQuery替换XMLHttpRequest

时间:2020-03-06 14:27:14  来源:igfitidea点击:

我对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有这样做的好方法吗?

解决方案

我不认为jQuery实现了超时功能,但是普通的旧javascript相当不错:)

根据文档,jQuery.get的参数是" URL,数据,回调",而不是" URL,回调"。

在回调函数末尾调用JavaScript的setTimeout函数足以使此函数连续执行。

$.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);
    });
}

取出readyState和状态检查。 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);

无需在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;
});

最后,我想它是添加的类型。这似乎为我工作。

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();
  }

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