代码之家 › 专栏 › 技术社区 › cyber-guard

将AJAX转换为jQuery

ajax jquery

cyber-guard · 技术社区 · 14 年前

如何将以下代码转换为仅使用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的实际经验,我现在正在熟悉它。。。

5 回复 | 直到 14 年前

oezi 14 年前

看看jquerys load() -我想这就是你要找的:

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

编辑: 如果希望有不同的错误和成功处理程序,请使用 ajax() 和其他发布的一样,这是一个可行的方法——但是对于qa simple来说,获取这个并将其放入div请求中,load()更加简单。

编辑2: 对于您的评论:最好是以任何方式标识您的输入字段(给它一个id,或者给每个应该得到此事件的字段一个类),然后简单地执行以下操作:

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

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

(不是:我没有测试过,只是在脑子里写出来。。。如果有问题,看看 documentation )

darioo 14 年前

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

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

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

  }
});

注意:没有经过测试,但是要弄清楚这段代码在做什么并不难。

Coin_op 14 年前

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

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

Cubed Eye Qamar Aftab 14 年前

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是处理数据的函数,data type是预期接收的数据类型。

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

Salman Paracha 14 年前

为了帮助减少代码占用,我更喜欢使用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;
     });