Conversion d'AJAX en jQuery

Comment convertir le code suivant pour utiliser uniquement la bibliothèque jquery?Conversion d'AJAX en 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>

Désolé, je devrais probablement avoir dit que je n'ai pas vraiment une expérience pratique avec jquery, et je suis en train de me familiariser avec maintenant ...

Source

2010-11-22 cyber-guard

un coup d'oeil à jquerys load() - je pense que c'est ce que vous cherchez:

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

EDIT: si vous voulez avoir différents gestionnaires d'erreurs et de succès, en utilisant ajax() comme d'autres postés serait le chemin à parcourir - mais pour qa simple obtenir-ce-et-mettre-dans-cela-div-request, load() est plus court et facile .

EDIT2: à votre commentaire: le mieux serait d'identifier votre champ de saisie de quelque façon que ce soit :

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

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

(pas: i havn't testé que, en train d'écrire sur mon esprit ... s'il y a un problème, il suffit de prendre un coup d'oeil à la documentation)

Source

2010-11-22 13:34:01 oezi

Merci, fonctionne comme un charme. Ne peut pas croire qu'une ligne a remplacé tout le code ... Aussi comment iriez-vous autour de l'implémentation de l'événement onkeyup dans jquery? –

s'il vous plaît jeter un oeil à mon édition, j'espère que cela vous aide. – oezi

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

Quelque chose comme que, lorsque le service est l'URL, la fonction successFunction est celle avec laquelle vous faites quelque chose, et dataType est le type attendu de données que vous recevrez.

JQuery Docs

Cela peut sembler un peu écrasante, je suis désolé d'avoir tendance à utiliser des fermetures donc je n'ai une ou deux fonctions AJAX génériques (GET et POST), pour toute personne intéressée ici est un appel de fonction de l'échantillon la fonction getData ci-dessus

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

Source

2010-11-22 13:30:36

Vous pouvez simplement utiliser 'error: failureFunction, success: successFunction' au lieu de l'encapsuler avec une autre fonction anonyme. De plus, je n'appellerais pas l'argument 'XMLHttpRequest' mais' xhr' comme 'XMLHttpRequest' est le nom d'une classe existante. – ThiefMaster

Est-ce mieux? –

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

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

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

    } 
});

note: non testé, mais il ne devrait pas être trop difficile de comprendre ce que ce code est en train de faire.

Source

2010-11-22 13:31:00 darioo

Pourquoi ne pas utiliser jQuery pour définir le code HTML? '$ (" # dans "). html (données);' – hunter

'document.getElementById (" in "). innerHTML = données;' dans jQuery est '$ (" # dans "). html (données);'. –

@Mike: fixe; merci de le signaler – darioo

Pour aider à réduire l'empreinte du code, je préfère utiliser jQuery.post(). Vous pouvez en lire plus à ce sujet ici http://api.jquery.com/jQuery.post/

En fait, vous avez spécifié "GET" comme méthode, la meilleure option est ici jQuery.get(). Vous pouvez en lire davantage ici http://api.jquery.com/jQuery.get/

Exemple:

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

Source

2010-11-22 13:33:28

la fonction jQuery plus semblable serait être $.Get.

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

Source

2010-11-22 13:34:41

Conversion d'AJAX en jQuery

Répondre

Questions connexes