преобразование из прототипа в jquery

Question

Я пытаюсь сделать простое обновление ajax div из php-файла, который получает данные из базы данных mysql. Одна функция заполняет div, другая добавляет сообщения в базу данных и вызывается нажатием кнопки отправки. Мне было интересно, может ли кто-нибудь дать мне свои эквиваленты в jquery. Ниже приведены версии прототипов.

<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

jQuery .ajax() звонок делает все. У него есть обертки с меньшими параметрами, такими как .get(), .post() и .load(), которые можно использовать для более подробного синтаксиса.

Вы не указали, в каком формате находятся данные, которые вы получаете. Вам нужно указать в вызове .ajax(). Грубо говоря:

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

Примечание: параметр DATATYPE просто должен соответствовать любой скрипт производит. Если messages.php создает, скажем, HTML-список сообщений, тогда установите для dataType значение «html». Если это так, то вы можете также упростить код:

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

Примечание: функция нагрузки() является просто оболочкой .ajax(). Используйте .ajax(), если вам необходимо установить такие вещи, как таймауты, обработка ошибок и т.д. Например:

<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> 

выше является более полным примером и должны дать вам представление о том, что вы можете использовать дополнительные параметры , Если они вам не нужны, просто используйте сокращенные версии.

Answer 2

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

для второго addmessage

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

для получения более подробной информации посмотрите на http://docs.jquery.com/Ajax