將行添加到MySQL數據庫並使用jQuery顯示DIV而無需刷新頁面

Question

我正在使用一些PHP腳本將一些數據從複雜表單添加到MySQL數據庫，然後在一些HTML表中將其全部顯示出來。一切正常，但我想'升級'我的腳本與jQuery和（我想）AJAX。

我想要做的是當用戶提交數據時，該行（或<div>）顯示在HTML表格中而不刷新頁面。表格和表格在同一頁上，當然...

一些指導方針會很有幫助，因爲我不確定我是否應該使用AJAX或其他東西來滿足我的需求。一些教程的鏈接也將很棒:)

非常感謝您的幫助！

Answer 1

我用了this tutorial實現我的項目之一的評論系統。它使用ajax並且工作得很好。我相信這是你需要的。

Answer 2

一個簡單的方法來做到這一點。當用戶提交的數據，你使用jQuery把數據上傳到PHP的處理程序，將數據保存到數據庫使用jQuery的POST方法

http://api.jquery.com/jQuery.post/

並返回一個HTML格式的行添加到您的表。

這裏有一個很好的例子： http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form-submit-examples-with-php/comment-page-1/

Answer 3

你需要：

• 一個PHP頁面，提交表單。理想情況下，這個頁面將返回結果作爲JSON對象（PHP有一些方便的JSON函數可以將PHP數組和對象直接轉換爲適當的JSON字符串）。不要忘記在你返回的JSON對象中包含一些錯誤信息。這可以具有以下形式：

  { 「的errorCode」：0， 「結果」： { 「VAR1」：值1， 「VAR2」：VALUE2 } }

• 一些JavaScript來提交表格。這可以用jQuery.ajax,jQuery.post或jQuery.get函數很好地完成。

• 一些JavaScript來處理PHP腳本的結果。這將是您給jQuery.ajax，jQuery.post或jQuery.get函數的回調函數。該腳本將：

  • 顯示錯誤給用戶（可以設置在例如使用jQuery("#error").html("My error message");一個div一些文本）
  • 插入到您的表中的行。您可以使用jQuery.append和jQuery.html函數動態構建HTML元素。