從原型轉換到jquery

我想從一個PHP文件，從MySQL數據庫中獲取數據的div的簡單ajax更新。一個函數填充div，另一個函數將消息添加到數據庫，並在點擊提交按鈕時調用。我想知道如果有人可以在jQuery中給我他們的等價物。以下是原型版本。從原型轉換到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>

來源

2009-02-21 Vikram Haer

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

注：負載（）函數就在阿賈克斯的包裝（）。使用阿賈克斯（）如果你需要設置之類的東西超時，錯誤處理等。例如：

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

上面是更全面的例子，應該給你的，你可以使用什麼額外的參數的想法。如果你不需要他們，只需使用速記版。

來源

2009-02-21 03:53:18 cletus

我很新的這一點，但我敢肯定的數據出來爲html。有什麼具體的我不得不改變從上面的代碼？你們回覆得有多快真的很棒，再次感謝。 – 2009-02-21 04:06:31

您的腳本（messages.php）會以特定的格式（例如HTML，XML，JSON等）編寫它的輸出。dataType參數的意義在於匹配您的腳本生成的任何內容。如果它產生html，請將dataType設置爲html。 – cletus 2009-02-21 04:11:15

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

來源

2009-02-21 03:55:21 Gripsoft

從原型轉換到jquery

回答

相關問題