I have a JSON object I am returning from the database. It is formatted correctly. I am trying to access the data in it with an AJAX call. Here is my AJAX.
I have » in my data because I am looking for all of the data. I tried putting ‘id’ there (there is an ID in my JSON object, but the function stopped working when I did that. When I alert ‘data’ I get an object, but where I alert ‘data.id’ I get ‘undefined.’ What am I doing wrong? This is my first AJAX call. The URL is valid. I checked.
5 Answers 5
This sends an empty data object to the server and works around some issues where sending empty data (not including the data at all) causes issues.
One other thing I have seen is not setting:
One easy way to «debug» data visually is to include json2.js and do (in the success function):
try data[0] and see what you get in an alert. been there i think this will help you
There isn’t enough information to answer this question properly.
If you’re trying to debug with ‘Alert’ though, you’re in trouble.
Instead of ‘alert(data)’, try ‘console.log(data)’, assuming you’re using FireBug or the Inspector (Chrome, Safari).
Data may be several kinds of things, generally an object. So, alerting it won’t do much for you, unless you turn it into a string first.
You can also use the network panels to see what data is coming over the wire, or you can use something like Fiddler or HTTPScoop to figure out what is coming back from the server.
Return JSON response from AJAX using jQuery and PHP
JSON stands for JavaScript Object Notation, it is a data-interchange format which is also been used to passing data from the server.
It is the best and effective way when need to return multiple values as a response from the PHP script to the jQuery.
You couldn’t directly return an array from AJAX, it must have converted in the valid format.
In this case, you can either use XML or JSON format.
In the tutorial demonstration, I will return an array of users from AJAX, while return converts the array into JSON format using the json_encode() function in the PHP.
On the basis of response show data in tabular format.
Contents
1. Table structure
I am using users table in the tutorial example.
2. Configuration
Create config.php for database configuration.
Completed Code
3. HTML
Create a
for displaying user list using AJAX response.
Completed Code
4. PHP
Create ajaxfile.php file for handling AJAX request.
Completed Code
5. jQuery
On document ready state send an AJAX GET request.
Loop through all response values and append a new row to
on AJAX successfully callback.
Note – For handling JSON response you have to set dataType: ‘JSON’ while sending AJAX request.
Completed Code
6. Demo
7. Conclusion
In this tutorial, I showed how you can return the JSON response and handle it in jQuery AJAX.
You can convert the PHP array in JSON format with json_encode() function and return as a response. Set dataType: ‘JSON’ when send AJAX request.
If you found this tutorial helpful then don’t forget to share.
Сегодня вы узнаете, как создавать, читать, обновлять и удалять записи в базе данных. А также реализуем поиск и пагинацию. Мы будем использовать jQuery, AJAX, JSON и PHP.
1. Обзор проекта
Это руководство будет посвящено созданию, чтению, обновлению и удалению записей в базе данных. Мы сделаем это, используя jQuery, AJAX, JSON и PHP.
Использование AJAX предотвратит повторную загрузку всей страницы при каждом нажатии кнопки. В результате это улучшит опыт взаимодействия. Также ваше веб-приложение будет работать быстрее.
В результате вы получите такого вида приложение.
2. Настройка REST API
Но если у вас уже есть собственный REST API, который будет работать с этим руководством, это тоже хорошо.
В моем случае, один из примеров, где я могу получить доступ к REST API.
Данные выше будут использованы нашим AJAX приложением. Список товаров будет отображаться в Bootstrap таблице с помощью кнопок «Просмотр», «Редактировать» и «Удалить». Вы увидите это в разделе данного урока «Как читать данные JSON с помощью jQuery AJAX?».
Чтобы сделать JSON-данные читаемыми в браузере Chrome, можете использовать расширение JSONView
3. Необходимые файлы и папки
3.1 Файловая структура
3.2 Создание файла index.html
Создайте файл index.html в папке проекта (например, rest-api) и внесите следующий код.
3.3 Подключение Bootstrap
Если вам нужно включить Bootstrap через загрузку, то это будет работать также.
3.4 Создание главного CSS файла
3.5 Установка JavaScript-библиотек jQuery и Bootbox.js
Откройте папку assets в папке app и создайте папку js
В папку js мы поместим библиотеки jQuery и Bootbox.js.
Библиотека jQuery необходима, чтобы сделать наше простое приложение простым. Скачайте jQuery по этой ссылке.
Библиотека Bootbox.js необходима, чтобы диалоговое окно подтверждения «удаления» выглядело лучше. Загрузите Bootbox.js по этой ссылке.
Также есть CDN для этих JavaScript библиотек. Вы можете использовать их, если хотите. Оба варианта будут работать.
3.6 Создание файла app.js
Файл app.js будет содержать некоторые основные функции HTML и JavaScript, которые могут использоваться другими JS файлами в нашем приложении.
В папке app создайте файл app.js со следующим содержимым.
3.7 Создание папки «products» и файлов для будущих скриптов
Теперь мы создадим несколько JavaScript файлов.
Пока мы оставим их пустыми. Но мы заполним их в следующих разделах этого руководства.
4. Как прочитать данные в формате JSON с помощью jQuery
4.1 Показать товары на странице при загрузке
В папке products откройте файл read-products.js
Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.
4.2 Показать товары при клике на кнопку
Кнопку можно найти в HTML-шаблонах «Создать товар и «Обновить товар. Мы увидим это в следующих разделах.
Поместите следующий код под showProducts(); предыдущего раздела.
4.3 Создание функции showProducts()
Теперь мы создадим метод showProducts(). Замените комментарий // здесь будет метод showProducts() в файле read-products.js следующим кодом.
4.4 Получение списка товаров
Следующий код свяжется с нашим API, чтобы получить список продуктов в формате JSON. Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
4.5 Создание кнопки «Добавить товар»
Мы должны добавить кнопку «Создать продукт» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
4.6 Создание HTML-таблицы
Мы должны начать строить HTML-таблицу, в которой появится список продуктов.
Следующий код создаст HTML-таблицу с ее заголовком. Разместите его после кода предыдущего раздела.
4.7 Построение строки таблицы для каждой записи
Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.
Замените комментарий // здесь будут строки следующим кодом.
4.8 Вставка контента на страницу
Поместите следующий код после закрывающего тега table
4.9 Изменение заголовка страницы
Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.
Поместите следующий код после кода предыдущего раздела.
5. Как создать или вставить данные с помощью jQuery AJAX?
5.1 Обработчик нажатия кнопки «Создать товар»
Откройте в папке products файл create-product.js
5.2 Получение списка категорий из API
Нам нужно получить список категорий из API, потому что мы создадим поле выбора (select) «категории». Здесь пользователь сможет выбрать категорию продукта.
Замените // здесь будет вызов API категорий следующим кодом.
5.3 Создание кнопки выбора категории
Здесь мы создадим тег select с опцией «Categories».
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.
5.4 Добавление кнопки «Все товары»
Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку товаров.
Поместите следующий код после кода предыдущего раздела.
5.5 Создание HTML-формы «Создание товара»
Теперь мы создадим HTML-форму «Создание товара». Здесь пользователь может ввести информацию о новом продукте, которая будет отправлена на сервер.
Поместите следующий код после кода предыдущего раздела.
5.6 Показать форму «Создание товара» и изменить заголовок страницы
Мы должны сделать так, чтобы кнопка и форма появлялись на нашей веб-странице. Также изменим заголовок страницы.
Добавьте следующий код после кода предыдущего раздела.
5.7 Обработчик кнопки «Создать товар», получение данных формы и отправка данных на сервер
Если форма «Создание товара» отправлена, нам нужен скрипт для ее обработки.
Замените комментарий // здесь будет обработчик «создать форму товара» следующим кодом.
6. Как получить данные определенного товара с помощью jQuery AJAX?
6.1 Обработчик кнопки «Просмотр товара»
Кнопка «Просмотр товара» отображается в общем списке. При клике должны отображаться полные сведения о товаре.
Добавьте следующий код.
6.2 Получение ID товара
Наш скрипт должен идентифицировать запись для чтения. Мы сделаем это путем получения идентификатора товара.
Вместо комментария // здесь будет получение ID товара внесите следующий код.
6.3 Чтение одной записи с API
Поместите следующий код после кода предыдущего раздела.
6.4 Добавление кнопки «Все товары»
Нам нужна кнопка «Все товары» вернуться к списку всех товаров.
Замените комментарий // здесь будет кнопка для просмотра всех товаров на следующий код.
6.5 Показ полных данных о товаре в таблице
Мы будем выводить информацию о товаре, возвращаемую из API, в HTML таблицу.
Вставьте следующий код после кода предыдущего раздела.
6.6 Вывод таблицы «Просмотр товара» и изменение заголовка страницы
Мы должны сделать так, чтобы кнопка «Все товары» и таблица появлялись на нашей веб-странице. Изменим заголовок страницы.
Поместите следующий код после кода предыдущего раздела.
7. Как обновить данные с помощью jQuery AJAX?
7.1 Обработчик кнопки «Обновление товара»
Кнопка «Редактировать» находится в списке товаров. При нажатии на неё должна отображаться форма для обновления товара, заполненная информацией о нём.
В папке app/products откройте файл update-product.js и добавьте следующий код.
7.2 Получение информации о товаре
Чтобы заполнить нашу HTML-форму для обновления товара, нам нужно получить информацию о продукте из API.
Поместите следующий код после кода получения id товара.
7.3 Получение списка категорий
Список категорий необходим для вариантов категорий товаров. Записи категорий будут отображаться как параметры в поле ввода «select» HTML.
Замените комментарий // здесь будет загрузка списка категорий следующим кодом
7.4 Добавление кнопки «Все товары» и показ формы для обновления товара
Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку продуктов.
Вместо комментария // здесь будет HTML для обновления товара вставьте следующий код.
7.5 Обработчик отправки формы для обновления продукта: получение данных формы и отправка на сервер
Замените комментарий // здесь будет обработчик ‘update product form’ следующим кодом.
Поместите следующий код после кода получения id товара.
8.3 Удаление записи с помощью API
Замените комментарий // здесь будет запрос на удаление на следующий код.
9. Как реализовать поиск данных с помощью jQuery AJAX?
9.1 Подключение два js файла в index.html
9.2 Создание файла products.js
Файл products.js будет содержать любые функции, которые могут использоваться другими компонентами продукта, такими как наши файлы «read-products.js» или «search-products.js».
9.3 Создание файла search-product.js
Файл search-product.js будет содержать код, который перехватывает отправку формы поиска продукта.
9.4 Изменение файла read-products.js
10. Как сделать пагинацию данных с помощью jQuery AJAX?
Изменение URL-адреса JSON
Чтобы сделать нумерацию страниц, нам нужно изменить URL-адрес JSON. Содержимое этих новых данных JSON будет включать узел «пагинации». Похоже на следующее.
Поэтому мы изменим URL JSON с:
Это означает, что мы должны что-то изменить в нашем коде. Смотрите изменения в следующем разделе.
10.2 Покажем товары, используя JSON URL
Откройте файл app/products/read-products.js и замените в нём код на следующий.
10.3 Добавим пагинацию HTML
Вам так же необходимо изменить URL домашней страницы из предыдущего руководства в соответствии с вашим URL.
В моём случае я изменяю
Итоговая файловая структура
После соединения backend части с frontend получаем следующую структуру.
Если вам понравилась данная статья, рекомендую к прочтению создание регистрации и авторизации в php с помощью JWT.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Do I just echo the result? Do I have to set the Content-Type header?
19 Answers 19
While you’re usually fine without it, you can and should set the Content-Type header:
If I’m not using a particular framework, I usually allow some request params to modify the output behavior. It can be useful, generally for quick troubleshooting, to not send a header, or sometimes print_r the data payload to eyeball it (though in most cases, it shouldn’t be necessary).
A complete piece of nice and clear PHP code returning JSON is:
According to the manual on json_encode the method can return a non-string (false):
Returns a JSON encoded string on success or FALSE on failure.
When this happens echo json_encode($data) will output the empty string, which is invalid JSON.
json_encode will for instance fail (and return false ) if its argument contains a non UTF-8 string.
This error condition should be captured in PHP, for example like this:
Then the receiving end should of course be aware that the presence of the jsonError property indicates an error condition, which it should treat accordingly.
In production mode it might be better to send only a generic error status to the client and log the more specific error messages for later investigation.
Read more about dealing with JSON errors in PHP’s Documentation.
form action =» return.php » class =» js-ajax-php-json » method =» post » accept-charset =» utf-8 » >
input type =» text » name =» favorite_restaurant » value =»» placeholder =» Favorite restaurant » />
input type =» text » name =» favorite_beverage » value =»» placeholder =» Favorite beverage » />
select name =» gender » >
option value =» male » > Male option >
option value =» female » > Female option >
select >
input type =» submit » name =» submit » value =» Submit form » />
form >
This comment has been minimized.
Copy link Quote reply
hahaw commented May 10, 2014
what is the «return.php»? In html form, the from’s action is «return.php».
This comment has been minimized.
Copy link Quote reply
dwlamb commented May 29, 2014
Thank you for wasting an hour of my time trying to get a tutorial with a bug to work. Not explaining anything about ‘return,php’ makes this useless. Have a nice day.
This comment has been minimized.
Copy link Quote reply
wolfika commented Jul 15, 2014
You don’t actually have to do anything with the return.php file. In fact, your form doesn’t even need to have an action or method attribute if you’re using AJAX, because your form is processed through JavaScript. To be honest, I’d rather use a simple clickable button instead of a submit button, so your browser doesn’t actually route the request to the URL specified in the action attribute. You can check if a button is clicked like this:
Here is a git repository ( https://github.com/pavanyogi/return-json-response-to-ajax-call-php ), which I forked from the above gist with minimum code and simplified instructions. Feel free to use and suggestions (if you have any).
This comment has been minimized.
Copy link Quote reply
Alexander-Pop commented May 24, 2020
just remove |action=»return.php»| from form’s markup as it doesn’t effect anything (because of «return false;» in «$(«.js-ajax-php-json»).submit(function()<")
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
