Ajax предлагает отличный способ работы с вашим интерфейсом и больше не нужно ждать загрузки всей страницы. В jQuery есть набор инструментов, которые упрощают его применение. Это руководство поможет вам понять, как использовать jQuery для подключения к PHP.
AJAX объяснил
Асинхронный JavaScript и XML (AJAX) — это очень простой, но полезный сценарий на стороне сервера. Хорошо известный своим частичным обновлением страницы, вам не нужно обновлять целую веб-страницу только для того, чтобы увидеть обновление для небольшой ее части. Большое количество сайтов использует это сейчас.
Что мы стремимся построить
На самом деле, есть много вещей, которые мы могли бы построить, но мы собираемся сосредоточиться на его простоте, мы собираемся создавать основные вещи.
Мы собираемся создать текстовое поле, в котором вы можете напечатать что угодно, и оно будет отправлено на сервер через jQuery. Сервер добавит некоторую часть текста и отправит его обратно в jQuery.
Начало
Этот HTML-код довольно прост. Все, что нам нужно, это вводимый текст, а также div с id, чтобы jQuery мог вводить текст, когда он возвращается с сервера. Нам также нужна библиотека jQuery.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Enter a value :< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Enter a value :
Пришло время для jQuery
Прежде всего, нам нужно создать простое событие key up для нашего текстового поля ввода при загрузке страницы. Когда пользователь вводит что-либо в текстовое поле, он вызывает функцию, которая обрабатывает AJAX.
//When Page Loads.... $(document).ready(function(){ // When the user finishes typing // a character in the text box... $('#txtValue').keyup(function(){ // Call the function to handle the AJAX. // Pass the value of the text box to the function. sendValue($(this).val()); }); });
Здесь волшебная часть. Мы собираемся сделать функцию, которая будет обрабатывать AJAX. Эта функция будет иметь один аргумент; это будет текст из текстового поля. Есть способы использовать AJAX с jQuery. Мы собираемся использовать почтовый метод. Мы будем использовать 4 аргумента, однако первый из них обязателен.
Аргументы метода сообщения:
Ваш файл на сервере нужен, в этом уроке это файл PHP.
Значения, которые вы хотите передать на сервер, используя запрос POST.
Функция будет вызвана, когда сервер ответит.
Использование JSON для организации данных.
JQuery AJAX код:
// Function to handle ajax. function sendValue(str){ // post(file, data, callback, type); (only "file" is required) $.post( "ajax.php", //Ajax file { sendValue: str }, // create an object will all values //function that is called when server returns a value. function(data){ $('#display').html(data.returnValue); }, //How you want the data formated when it is returned from the server. "json" ); }
PHP
Там не так много для файла PHP. Мы просто получаем переменные POST. Просто убедитесь, что выходные данные закодированы в формате JSON, а выходные данные мы хотим вернуть в наш jQuery.
< ?php //Get Post Variables. The name is the same as //what was in the object that was sent in the jQuery if (isset($_POST['sendValue'])){ $value = $_POST['sendValue']; }else{ $value = ""; } //Because we want to use json, we have to place things in an array and encode it for json. //This will give us a nice javascript object on the front side. echo json_encode(array("returnValue"=>"This is returned from PHP : ".$value)); ?>
в целом
Вот результат, если все были объединены вместе.
JQuery / HTML-код:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
PHP:
< ?php //Get Post Variables. The name is the same as //what was in the object that was sent in the jQuery if (isset($_POST['sendValue'])){ $value = $_POST['sendValue']; }else{ $value = ""; } //Because we want to use json, we have to place things in an array and encode it for json. //This will give us a nice javascript object on the front side. echo json_encode(array("returnValue"=>"This is returned from PHP : ".$value)); ?>