Главная » Языки программирования

jQuery AJAX Load Method

Содержание
  1. Примеры отправки AJAX JQuery
  2. GET запрос
  3. Код можно сократить используя функцию $.get
  4. Код файла index.php
  5. POST запросы
  6. Или сокращенная версия – функция $.post
  7. Код файла index.php
  8. Отправка формы через AJAX
  9. Код файла handler.php
  10. Работа с JSON
  11. Короткая версия
  12. Код файла json.php
  13. Возможные проблемы
  14. Выполнение JS загруженного через AJAX
  15. Или
  16. Дождаться выполнения AJAX запроса
  17. Отправка HTTP заголовков
  18. Обработка ошибок
  19. Комментарии 4
  20. Load Data From MySQL Database in PHP Using jQuery Ajax
  21. jQuery Ajax Load
  22. Retrieve MySQL Data in the HTML Table Using jQuery AJAX
  23. Create a database connection in PHP
  24. Insert Records in the Table
  25. Create a Table Using Bootstrap
  26. Create jQuery AJAX Function
  27. Conclusion

Примеры отправки AJAX JQuery

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

$.ajax(< url: '/index.php', /* Куда пойдет запрос */ method: 'get', /* Метод передачи (post или get) */ dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */ data: , /* Параметры передаваемые в запросе. */ success: function(data) < /* функция которая будет выполнена после успешного запроса. */ alert(data); /* В переменной data содержится ответ от index.php. */ >>);

Код можно сократить используя функцию $.get

$.get('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_GET['text'];

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

Читайте также:  Название документа

POST запросы 

$.ajax(< url: '/index.php', method: 'post', dataType: 'html', data: , success: function(data) < alert(data); >>);

Или сокращенная версия – функция $.post

$.post('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_POST['text'];

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

  • Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
  • serialize можно применить только к тегу form и полям формы, т.е. $(‘div.form_container’).serialize(); – вернет пустой результат.

Пример отправки и обработки формы:

Код файла handler.php

if (empty($_POST['login'])) < echo 'Укажите логин'; >elseif (empty($_POST['password'])) < echo 'Укажите пароль'; >else

Работа с JSON

Идеальный вариант когда нужно работать с массивами данных.

Короткая версия

$.getJSON('/json.php', function(data) < alert(data.text); alert(data.error); >);

$.getJSON передает запрос только через GET.

Код файла json.php

header('Content-Type: application/json'); $result = array( 'text' => 'Текст', 'error' => 'Ошибка' ); echo json_encode($result);

Возможные проблемы

При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:

Управляющие символы в ответе JSON

Из-за них ответ считается не валидным и считается как ошибочный запрос. В таких случаях помогает очистка буфера вывода ob_end_clean (если он используется на сайте).

. // Очистка буфера ob_end_clean(); header('Content-Type: application/json'); echo json_encode($result, JSON_UNESCAPED_UNICODE); exit();

Выполнение JS загруженного через AJAX

В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.

Или

Дождаться выполнения AJAX запроса

По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно. Простой пример:

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', success: function(data)< text = data; >>); alert(text); /* Переменная будет пустая. */

Переменная text будет пустая, а не как ожидается текст который вернул index.php Чтобы включить синхронный режим нужно добавить параметр async: false .
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в страницы.

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', async: false, success: function(data)< text = data; >>); alert(text); /* В переменной будет результат из index.php. */

Отправка HTTP заголовков 

$.ajax(< url: '/index.php', method: 'get', dataType: 'html', headers: , success: function(data) < console.dir(data); >>);

В PHP они будут доступны в массиве $_SERVER , ключ массива переводится в верхний регистр с приставкой HTTP_ , например:

Обработка ошибок

Через параметр error задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.

$.ajax(< url: '/index.php', method: 'get', dataType: 'json', success: function(data)< console.dir(data); >, error: function (jqXHR, exception) < if (jqXHR.status === 0) < alert('Not connect. Verify Network.'); >else if (jqXHR.status == 404) < alert('Requested page not found (404).'); >else if (jqXHR.status == 500) < alert('Internal Server Error (500).'); >else if (exception === 'parsererror') < alert('Requested JSON parse failed.'); >else if (exception === 'timeout') < alert('Time out error.'); >else if (exception === 'abort') < alert('Ajax request aborted.'); >else < alert('Uncaught Error. ' + jqXHR.responseText); >> >);

Комментарии 4

В примере Отправка формы через AJAX страница перезагружается. Видимо нужно добавить return false после $.ajax(<>);

$("#form").on("submit", function() $.ajax( url: '/handler.php', 
method: 'post', 
dataType: 'html', 
data: $(this).serialize(), 
success: function(data) $('#message').html(data); 
> 
>); 
return false;
>);
$("#form").on("submit", function(e). 
e.preventDefault();
>)

У меня вообще не работали POST запросы, особенно для меня, для начинающего было очень сложно, работали только GET, очень долго голову ломал почему так происходит. Нашёл пример на другом сайте, который работал долго сравнивал и думал почему так. Здесь пример не работает, а на другом сайте рабочий пример оказался.
Так вот:
$.ajax( url: ‘/index.php’,
method: ‘post’,
dataType: ‘html’,
data: ,
success: function(data) alert(data);
>
>);
Оказывается чтобы у меня заработали именно POST запросы надо было поменять строчку:
«method: ‘post’,» на:
«type: ‘post’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!

Источник

Load Data From MySQL Database in PHP Using jQuery Ajax

The jQuery Ajax call will load the data from the database or from any file without refreshing the entire page. Using jQuery Ajax call the data loads asynchronously. This means the multiple functions can be executed at the same time not one by one. This is only possible by using Ajax. It optimizes the speed of the website and makes it fast than normal. Today, I will be showing you how to load data from the MySQL database into PHP using jQuery Ajax. If you don’t know how to submit form data in PHP MySQL without page refresh then please go through my previous post.

jQuery Ajax Load

  • The jQuery provides a load() method.
  • This method is used to load the data from the server or the local system or from any file.
  • It returns the data into the selected element which is defined for any specific area.
  • jQuery load() method provides a very simple way to load the data asynchronously from the webserver.
  • The basic syntax of this method is :

The parameter inside the jQuery load() method has the following meaning:

  • The first parameter (URL) specifies the source of the file that is to be load.
  • The second parameter (data) which specifies the query string (i.e. key/value pairs) that is sent to the webserver along with the request.
  • The last parameter (complete) is just a callback function that executes when the request completes. It is just like a response which returns after the execution completes.
  • Create a PHP file and paste the below code.
  • Now, create a text file with some content. In my case, I have created a .txt file with name content.txt and written some content as- This is programming fields.

Save and execute the above code. You will see that the content of the .txt file will be loaded without refreshing the page.

Demo of Loading data

Retrieve MySQL Data in the HTML Table Using jQuery AJAX

In the next step, we are going to create a load more functionality using jQuery AJAX call in PHP. In this functionality, there will be a button. So, when you will click on the button, It will load 2 records from the database. On every click of the button, It will load the data from the database. Here, we will design a table layout along with a button. On the click of the button, the records will be loaded from the database without refreshing the page. So let’s create a database connection.

Create a database connection in PHP

  • First of all, create a new PHP file for creating the database connection. In my case it is db-confg.php.
  • Now create a database if not created, or you can use the existing database.
  • Create a new table with name registration.
  • Here, is the database structure of the registration table.

Insert Records in the Table

Create a Table Using Bootstrap

  • Now, we’ll be creating another PHP file named index.php. Here, we’ll be creating a table layout using bootstrap.
  • So, include the bootstrap CDN or you can use the source file by downloading it.
  • Here, is the source code of the index.php file.
           
 
 First Name 0) < $students = mysqli_fetch_all($result,MYSQLI_ASSOC); foreach($students as $student) : ?>       ?>
 
Last Name Email Address City State Zipcode  
 
 
 
 
Load More..
  • At the top, I have included the db-config.php file in which, I have created the database connection.
  • Then, created a table layout using the Bootstrap 4 classes.
  • The bootstrap table contains the table body, in which I have created the PHP script for retrieving the records from the registration table which is shown above.
  • In the table cell, I have printed the values.
  • In the SQL query, I have used a limit of 2 so that the first time when you will run the script, It will print only 2 rows from the database table.
  • Now, I’ll create a jQuery file for making AJAX request.
  • Create a jQuery file with .js extension and paste the following code there. In my case the file name is load-data.js.

Create jQuery AJAX Function 

' + item.last_name + '' + item.email + '' + item.address + '' + item.city + '' + item.state + '' + item.zip_code + ''; >); $('#firstTable').append(trHTML); >, error: function (e) < console.log(response); >>); >); >);
  • In the above code, I have used the GET method to fetch the records from the database table using a PHP script. In the previous post, I had used the POST method. Actually, we’re inserting the records into the database table there.
  • The data type is JSON (JavaScript Object Notation). It is a very lightweight data-interchange format.
  • In the URL, I have passed a PHP file URL (load-data.php), in which I will create the PHP script for retrieving records from the database.
  • After that, the response of success after the AJAX call, It will return the data from the PHP file.
  • So, let’s create one more PHP file with named load-data.php because I have used the URL above. in the jQuery file.
  • In the above code, a SQL query has fired and It will return the data from the registration table and will convert it in the JSON format.
  • Now, save and execute the index.php file. It will show the below result.

  • Now, click on the Load more button, the 2 more records will be loaded in the same table without refreshing the page.

Conclusion

As you can see here, the records have been loaded after clicking the load more button. I hope guys the above example will help you to retrieve the data in the PHP using jQuery AJAX. The most important part of this jQuery AJAX call is to load the data asynchronously without refreshing the page.

Источник

Оцените статью