Используйте jQuery для замены XMLHttpRequest

Question

Я довольно новичок в библиотеках 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 есть хороший способ сделать это?

Answer 1

Я не думаю, что JQuery реализует функцию тайм-аут, но обычный старый Javascript делает это довольно красиво :)

Answer 2

По the docs аргументы jQuery.get являются url, data, callback, не url, callback.

Вызов функции setTimeout JavaScript в конце вашей функции обратного вызова должен быть достаточным для непрерывного выполнения этого запроса.

Answer 3

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

Answer 4

Выньте 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); 

Answer 5

Там нет необходимости устанавливать параметры GET по URL, 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; 
}); 

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

Спасибо всем за помощь. Я проголосую за тебя.