Question

如何将以下代码转换为仅使用jquery库？

<html>
<head>
<script>
function do_it(value)
{
function newXMLHttpRequest()
{
   try{ return new XMLHttpRequest(); }catch(e){}
   try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){}
   try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){}
   return null;
}

var ajax_request = false;
ajax_request = newXMLHttpRequest();
var url = "test.pl?b64="+value;
    ajax_request.open("GET",url,1);
    ajax_request.onreadystatechange = function()
    {
        if(ajax_request.readyState == 4)
        {

            var response = ajax_request.responseText;
            document.getElementById("in").innerHTML = response;

        }
    }
    ajax_request.send(null);
}
</script>
</head>
<body>

<form>
<input type="text" name="string" onkeyup="do_it(this.value)"/>
<input type="submit" name="submit">
</form>
<div style="position:absolute;width:200px;height:200px; background-color:yellow; margin-top:100px;" id="in"></div>

</body>
</html>

抱歉，我可能应该提到我实际上没有任何jquery的实践经验，而且我正在使用它来熟悉它...

Answer 1

看看jquerys load() - 我认为这就是你要找的东西：

function do_it(value){
  $('#in').load('test.pl', { b64: value });
}

编辑：如果你想拥有不同的错误和成功处理程序，那么使用ajax()就像其他人发布的那样就可以了 - 但是对于简单的get-this-and -put-it-into-that-div-request，load（）更简短。

EDIT2：对您的评论：最好的方法是以任何方式识别您的输入字段（为其提供ID，或者为应该获取此事件的每个字段提供相同的类）然后简单地做：

$('#mytextfield').keyup(function(){ // with id-selector
  do_it($(this).val());
});

$('.textfield').keyup(function(){ // with class-selector
  // whatever
});

（不是：我没有测试过，只是写下我的想法......如果有问题，请看看documentation）

Answer 2

$.ajax({
  url: 'test.pl?b64=' + value,
  success: function(data) {

      // document.getElementById("in").innerHTML = data; 

      $("#in").html(data);  // jQuery way instead of above line

  }
});

注意：未经过测试，但要弄清楚这段代码是做什么的应该不会太难。

Answer 3

function getData(service, successFunction, failureFunction, getDataType) {
    $.ajax({
        type: 'get',
        cache: false,
        url: service,
        error: function(XMLHttpRequest, textStatus, errorThrown){
            failureFunction(XMLHttpRequest, textStatus, errorThrown);  //Pass error details to the failure function
        },
        success: function(data) {
            successFunction(data); //pass data to the success function
        },
        dataType: getDataType
    });
}

类似的东西，服务是URL，successFunction是你对数据做的事情，dataType是你将要接收的预期数据类型。

JQuery Docs

这可能看起来有点压倒性，我很抱歉我倾向于使用闭包，所以我只有一两个通用的AJAX函数（GET和POST），对于这里感兴趣的人来说是一个调用上面的getData函数的示例函数

function getUserLabs()
{
    function successFunction(data){
        userLabs = new Array();
        $.each(data, function(i,item){
            var labID = data[i]['pk'];
            var labName = data[i]['fields']["name"];

            userLabs.push(new Array(labID, labName));
        });
    }

    function failureFunction(data) {
        alert("Data not received");
    }

    getData('lab/summary/', successFunction, failureFunction, 'json');
}

Answer 4

最相似的jQuery函数是$.Get。

$.get('test.pl?b64=' + value, function(data) {
  $('#in').html(data);
});

Answer 5

为了帮助减少代码占用空间，我更喜欢使用jQuery.post（）。您可以阅读更多相关信息这里http://api.jquery.com/jQuery.post/

实际上，你指定了“GET”作为你的方法，所以这里更好的选择是jQuery.get（）。您可以在http://api.jquery.com/jQuery.get/

了解更多相关信息

示例：

$.get("test.pl", { b64: value },
    function(data){
         document.getElementById("in").innerHTML = data;
     });

将AJAX转换为jQuery

5 个答案: