conversion du prototype en jquery

Question

J'essaie de faire une simple mise à jour ajax d'un div à partir d'un fichier php qui obtient des données à partir d'une base de données mysql. Une fonction remplit la div, l'autre ajoute des messages à la base de données et est appelée en cliquant sur un bouton de soumission. Je me demandais si quelqu'un pouvait me donner leurs équivalents en jquery. Voici les versions du prototype.

<script> 
function getMessages(){ 
    new Ajax.Updater('chat','messages.php', { 
    onSuccess:function(){ 
     window.setTimeout(getMessages, 3000); 
    } 
    }); 
} 
getMessages(); 
</script> 

<script> 
function addmessage(){ 
    new Ajax.Updater('chat','add.php',{ 
    method:'post', 
    parameters: $('chatmessage').serialize(), 
    onSuccess: function() { 
     $('messagetext').value = ''; 
    } 
    }); 
} 
</script> 

Answer 1

L'appel jQuery .ajax() fait tout. Il a des wrappers avec moins de paramètres comme .get(), .post() et .load() que vous pouvez utiliser pour une syntaxe moins verbeuse.

Vous ne mentionnez pas le format dans lequel les données sont récupérées. Vous devez spécifier dans l'appel .ajax(). En gros:

function addMessage(message) { 
    $.ajax({ 
    url: 'add.php', 
    success: function() { 
     $("#chatmessage").text(''); 
    }, 
    error: function() { ... }, 
    timeout: 3000, 
    data: { 
     message: message 
    } 
    }); 
} 

function getMessages() { 
    $.ajax({ 
    url: 'messages.php', 
    dataType: 'html', 
    timeout: 3000, 
    error: function() { ... }, 
    success: function(data) { 
     $("#messages").html(data); 
    } 
    }); 
} 

Note: le paramètre dataType a juste besoin de faire correspondre quel que soit le script produit. Si messages.php produit, disons, une liste HTML de messages, alors définissez le dataType à "html". Si tel est le cas, vous pouvez également simplifier le code:

function getMessages() { 
    $("#messages").load("message.php"); 
} 

Note: la fonction load() est juste une enveloppe autour .ajax(). Utilisez .ajax() si vous devez définir des choses comme les délais d'attente, la gestion des erreurs, etc. Par exemple:

<div id="messages"></div> 
<input type="button" id="getmessages" value="Get Messages"> 
... 
<script type="text/javascript"> 
$(function() { 
    $("#getmessages").click(function() { 
    $(this).attr("disabled", "true"); 
    $.ajax({ 
     url: 'message.php', 
     dataType: "html", 
     timeout: 5000, 
     error: function() { 
     alert("Error talking to server."); 
     $(this).attr("disabled", "false"); 
     }, 
     success: function(data) { 
     $("#messages").html(data); 
     $(this).attr("disabled", "false"); 
     } 
    }); 
    }); 
}); 
</script> 

Ce qui précède est un exemple plus complet et devrait vous donner une idée de ce que vous pouvez utiliser les paramètres supplémentaires pour . Si vous n'en avez pas besoin, utilisez simplement les versions abrégées.

Answer 2

$.ajax({ 
    type: "GET", 
    url: "messages.php", 
    data: "name=John&location=Boston", 
    success: function(){ 
     window.setTimeout(getMessages,3000); 
    } 
}); 

pour la deuxième addMessage

$.ajax({ 
    type: "POST", 
    url: "add.php", 
    data: $('#chatmessage').param(), 
    success: function() { 
     $('messagetext').value = ''; 
    } 
}); 

pour plus de détails jeter un oeil à http://docs.jquery.com/Ajax