Добавление строк в базу данных MySQL и отображение DIV с помощью jQuery без обновления страницы

Question

Я использую некоторый PHP-скрипт для добавления некоторых данных из сложной формы в базу данных MySQL, а затем показываю все это в некоторой HTML-таблице.Все работает просто отлично, но я бы хотел «обновить» мой скрипт с помощью jQuery и (я полагаю) AJAX.

Что я хотел бы сделать, это когда пользователь отправляет данные, строку (или <div>)отображается в таблице HTML без обновления страницы.Форма и таблица находятся на одной странице, конечно ...

Некоторые рекомендации были бы действительно полезны, потому что я не уверен, должен ли я даже использовать AJAX или что-то еще для своих нужд.Ссылки на некоторые учебники также будут отличными:)

Большое спасибо за любую помощь!

Answer 1

Простой способ сделать это - использовать метод JQuery POST

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

Когда пользователь отправляет данные, вы используете jQuery для отправки данных в обработчик PHP, который сохраняет данные в базе данных и возвращает строку в формате HTML для добавления в вашу таблицу.

Вот хороший пример: http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form-submit-examples-with-php/comment-page-1/

Answer 2

Вам понадобится:

• Страница php, где нужно отправить форму.В идеале эта страница будет возвращать результат в виде объекта JSON (в PHP есть несколько удобных функций JSON для преобразования массивов и объектов PHP непосредственно в правильную строку JSON).Не забудьте включить некоторую информацию об ошибках в возвращаемый вами объект JSON.Это может иметь форму:

  {"errorCode": 0, "result": {"var1": value1, "var2": value2}}

• НекоторыеJavaScript для отправки формы.Это можно сделать с помощью функций jQuery.ajax, jQuery.post или jQuery.get.

• Некоторый JavaScript-код для обработки результата из сценария PHP.Это будет функция обратного вызова, которую вы дадите функциям jQuery.ajax, jQuery.post или jQuery.get.Этот скрипт будет либо:

  • отображать ошибки пользователю (вы можете установить некоторый текст в div, например, используя jQuery("#error").html("My error message");)
  • Вставить строку в вашу таблицу.Вы можете динамически создавать HTML-элементы, используя функции jQuery.append и jQuery.html.

Answer 3

Я использовал этот урок для реализации системы комментариев в одном из моих проектов. Он использует AJAX и работает очень хорошо. Я считаю, что это то, что вам нужно.