使用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(); }
谢谢大家的帮助。我会投票给你。