Работа с данными с помощью Ajax

Здесь я хотел бы рассказать о том, как легко и просто начать использовать Ajax в повседневной жизни для отправки данных из форм, получения ответа и пр.

Мы будем использовать библиотеку JQuery. Скачайте и сохраните файл на своем сайте.

в хеде страницы подключаем нашу библиотеку кодом

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>

Технология аякс состоит из трех основных составных:

-файл взаимодействия с пользователем (с формой, которую заполняет и отправляет пользователь, например), назовем его index.php

— файл библиотеки позволяющей передавать данные на серверный скрипт

— сам серверный скрипт, в нашем случае написанный на php, и обрабатывающий передаваемые аяксом данные.

Представим ситуацию, когда вам нужно передать какие то данные на сервер без перезагрузки страницы. Например, пользователю нужно ввести в форму свои имя и фамилию, и это должно пойти в базу данных по нажатию кнопки «отправить».

Рисуем следующие поля

<p>
  <label>Имя
    <input type="text" name="name" id="name" />
  </label>
</p>
<p>
  <label>Фамилия
    <input type="text" name="lastname" id="lastname" />
  </label>
</p>
<p>
  <label>
    <input type="submit" name="go" id="go" value="Отправить" />
  </label>
</p>

Сюда пользователь будет вводить данные. Сохраним файл под именем index.php

Затем создадим файл serverside.php со следующим содержимым

<?
$host 		= "localhost";
$dbuser 	= "user";
$dbpass 	= "pass";
$db 		= "dbname";
$link = mysql_connect($host, $dbuser, $dbpass) or die("не могу соединиться"); 
mysql_select_db($db, $link); 

if (!empty($_POST))
	{
		$sql="INSERT INTO table (name,lastname) VALUES ('".mysql_real_escape_string($_POST['name'])."','".mysql_real_escape_string($_POST['last'])."')";	
		if (mysql_query($sql)) {echo 'Success!';}
	}
?>

Что нам нужно сделать: нам нужно как то передать данные из файла index.php файлу serverside.php без перезагрузки страницы. Пишем JS часть. Вставляем ее в хед документа после подключения библиотеки JQuery.

<script type="text/javascript" language="javascript">
function senddata() {
$.ajax({
  type: 'POST',
  url: "serverside.php",
  data: { name: $('#name').val(), lastname:$('#lastname').val()  }}
)}

</script>

что здесь происходит:

type: ‘POST’ — говорим библиотеке, что будем использовать пост запрос

url: «serverside.php», — скрипт на который будет идти пост запрос

data: { name: $(‘#name’).val(), lastname:$(‘#lastname’).val() } — данные, которые мы ему передадим

$(‘#name’).val() — фича JQuery, аналог записи document.getElementById.value, то бишь получение значение элемента по его ID.

Далее нам нужно сделать так, чтобы на какие то наши события шла отправка этих данных, вешаем на нашу кнопку он клик

<input id="go" onclick="senddata();" type="submit" name="go" value="Отправить" />

и по нажатию на кнопку срабатывает функция, отправляющая наши данные.

Для разнообразия, давайте получим ответ со скрипта serverside.php

Если помните, мы там написали вывод строки «Success!» если все будет ок, и данные вобьются в базу. Немного обновим наш JS код, отправляющий данные на серверную часть программы

function senddata() {
$.ajax({
  type: 'POST',
  url: "serverside.php",
  data: { name: $('#name').val(), lastname:$('#lastname').val()  },
 success: function(data){$('#resp').html(data)}}
)}

этим мы говорим, что полученный от сервера ответ, в случае успеха нужно вставить как html код внутри объекта с идентификатором resp, теперь давайте создадим этот объект, например контейнер div, и поместим его чуть ниже формы отправки

<div id="resp"></div>

и мы будем получать сообщение «Success» если корректно сработал запрос, и все это без перезагрузки страницы!

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

Дорогие читатели! Мною было принято решение закрыть комментарии на блоге. Теперь все обсуждения переносятся на недавно открытый форум, ввиду того, что формат сообщений там намного удобней для обсуждения. Не стесняйтесь задавать любые вопросы по тематике блога! Я всегда на связи.
Перейти на форум
.

Работа с данными с помощью Ajax: 41 комментарий

  1. Максим

    Здравствуйте. Большое спасибо за Ваши советы, они очень полезны. Удачи Вам в жизни.

  2. ygolkova

    Спасибо огромное! Настолько доступно написано, Вы молодец!!!

  3. Richard

    Как не передавать или не обрабатывать значения поля, если оно не заполнено.
    Например при выводе строк из бд, поле $_POST[host] не было выбрано и нужно вывести все данные но с фильтром ‘$_POST[names]’
    $q1=mysql_query(«SELECT * FROM main WHERE host LIKE ‘$_POST[host]’
                    AND names LIKE ‘$_POST[names]’ «);
    Спасибо.

    1. ОзимОзим Автор записи

      >Как не передавать или не обрабатывать значения поля, если оно не заполнено.
      очень просто. В серверном скрипте делаем проверку

      if ($_POST['var']!='') {// Делаем что нам нужно}

      >Например при выводе строк из бд, поле $_POST[host] не было выбрано и нужно вывести все данные но с фильтром ‘$_POST[names]‘
      простите, вообще не понял, о чем речь.

      1. Richard

        Спасибо.

        $q1=mysql_query("SELECT * FROM `main_data` WHERE TRUE ");
        if ( isset($_POST['host_type']) ) {
        $q1 .= " AND `host_type` LIKE '$_POST[host_type]' ";
        }
        if ( isset($_POST['host_name']) ) {
        $q1 .= " AND `host_name` LIKE '$_POST[host_name]' ";
        }

        echo 'Header 1Header 2Header 3';
        while($rowa=mysql_fetch_array($q1))
        {
        echo "";
        echo ''.$rowa['host_name'].'';
        echo ''.$rowa['host_type'].'';
        echo ''.$rowa['disc_space'].'';
        echo "";
        }

        Warning: mysql_fetch_array() expects parameter 1 to be resource

        1. ОзимОзим Автор записи

          это что? к чему?

          LIKE '$_POST[host_type]'

          это бессмысленная конструкция

          LIKE '%".$_POST['host_type']."%'

          как то так чтоли

          1. Richard

            Понятно, а что нужно использовать вместо LIKE если значения известны(тэг селект)

Комментарии запрещены.