Json parse ajax php

JSON PHP

A common use of JSON is to read data from a web server, and display the data in a web page.

This chapter will teach you how to exchange JSON data between the client and a PHP server.

The PHP File

PHP has some built-in functions to handle JSON.

Objects in PHP can be converted into JSON by using the PHP function json_encode() :

PHP file

The Client JavaScript

Here is a JavaScript on the client, using an AJAX call to request the PHP file from the example above:

Example

Use JSON.parse() to convert the result into a JavaScript object:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() const myObj = JSON.parse(this.responseText);
document.getElementById(«demo»).innerHTML = myObj.name;
>
xmlhttp.open(«GET», «demo_file.php»);
xmlhttp.send();

PHP Array

Arrays in PHP will also be converted into JSON when using the PHP function json_encode() :

PHP file

The Client JavaScript

Here is a JavaScript on the client, using an AJAX call to request the PHP file from the array example above:

Example

Use JSON.parse() to convert the result into a JavaScript array:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() const myObj = JSON.parse(this.responseText);
document.getElementById(«demo»).innerHTML = myObj[2];
>
xmlhttp.open(«GET», «demo_file_array.php», true);
xmlhttp.send();

PHP Database

PHP is a server side programming language, and can be used to access a database.

Imagine you have a database on your server, and you want to send a request to it from the client where you ask for the 10 first rows in a table called «customers».

On the client, make a JSON object that describes the numbers of rows you want to return.

Before you send the request to the server, convert the JSON object into a string and send it as a parameter to the url of the PHP page:

Example

Use JSON.stringify() to convert the JavaScript object into JSON:

const limit = <"limit":10>;
const dbParam = JSON.stringify(limit);
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() document.getElementById(«demo»).innerHTML = this.responseText;
>
xmlhttp.open(«GET»,»json_demo_db.php?x=» + dbParam);
xmlhttp.send();

Example explained:

• Define an object containing a «limit» property and value.
• Convert the object into a JSON string.
• Send a request to the PHP file, with the JSON string as a parameter.
• Wait until the request returns with the result (as JSON)
• Display the result received from the PHP file.

Take a look at the PHP file:

PHP file

header(«Content-Type: application/json; charset=UTF-8»);
$obj = json_decode($_GET[«x»], false);

$conn = new mysqli(«myServer», «myUser», «myPassword», «Northwind»);
$stmt = $conn->prepare(«SELECT name FROM customers LIMIT ?»);
$stmt->bind_param(«s», $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

PHP File explained:

• Convert the request into an object, using the PHP function json_decode() .
• Access the database, and fill an array with the requested data.
• Add the array to an object, and return the object as JSON using the json_encode() function.

Use the Data

Example

xmlhttp.onload = function() <
const myObj = JSON.parse(this.responseText);
let text = «»;
for (let x in myObj) <
text += myObj[x].name + «
«;
>
document.getElementById(«demo»).innerHTML = text;
>

PHP Method = POST

When sending data to the server, it is often best to use the HTTP POST method.

To send AJAX requests using the POST method, specify the method, and the correct header.

The data sent to the server must now be an argument to the send() method:

Example

const dbParam = JSON.stringify(<"limit":10>);
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() const myObj = JSON.parse(this.responseText);
let text =»»;
for (let x in myObj) text += myObj[x].name + «
«;
>
document.getElementById(«demo»).innerHTML = text;
>
xmlhttp.open(«POST», «json_demo_db_post.php»);
xmlhttp.setRequestHeader(«Content-type», «application/x-www-form-urlencoded»);
xmlhttp.send(«x=» + dbParam);

The only difference in the PHP file is the method for getting the transferred data.

PHP file

Use $_POST instead of $_GET:

header(«Content-Type: application/json; charset=UTF-8»);
$obj = json_decode($_POST[«x»], false);

$conn = new mysqli(«myServer», «myUser», «myPassword», «Northwind»);
$stmt = $conn->prepare(«SELECT name FROM customers LIMIT ?»);
$stmt->bind_param(«s», $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

Источник

Return JSON response from AJAX using jQuery and PHP

JSON or JavaScript Object Notation is a widely used transmitting format for passing data between a server and a web application. It is the most efficient way to return multiple values as a response from the PHP script to jQuery.

It is not possible to return an array directly from AJAX, and it must be converted into a valid format. You can either use the 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.

Table of Content

1. Table structure

I am using users table in the example.

CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(100) NOT NULL, `name` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Database connection

Create config.php for database configuration.

3. Create HTML Layout

Create an HTML table element with an id of “userTable” to display the user list using the AJAX response.

4. AJAX – Returning JSON Response from PHP

Create ajaxfile.php to handle AJAX requests. Inside the file, create an array called $return_arr to store the response that will be sent back to the client.

Next, fetch all records from the users table and loop through them. For each user, add their details (id, username, name, and email) to the $return_arr array.

Finally, using json_encode() function convert $return_arr Array to JSON format before returning it to the client side.

 $id, "username" => $username, "name" => $name, "email" => $email); > // Encoding array in JSON format echo json_encode($return_arr);

5. jQuery – AJAX Request and JSON Response

An AJAX GET request is sent to ajaxfile.php once the document has reached the ready state. A new row is added to the table with the ID userTable after a successful callback, which loops through all response values.

In AJAX request set dataType to ‘json’ to handle the JSON response or you can use JSON.parse() to convert returned JSON string to an object.

$(document).ready(function()< $.ajax(< url: 'ajaxfile.php', type: 'get', dataType: 'JSON', success: function(response)< var len = response.length; for(var i=0; i" + "" + (i+1) + "" + "" + username + "" + "" + name + "" + "" + email + "" + ""; $("#userTable tbody").append(tr_str); > > >); >);

6. Demo

7. Conclusion

The PHP array must be encoded into JSON using the json_encode() function before a response can be returned. To handle returned JSON response you can either set dataType to ‘json’ or use JSON.parse() function.

With practice and further exploration, you can use these concepts to build more advanced and interactive web applications.

Additionally, you may refer to a tutorial to learn how to send a JavaScript array with an AJAX request.

If you found this tutorial helpful then don’t forget to share.

Источник