Tips for returning JSON data using AJAX

Question

Tips for returning JSON data using AJAX

When working with native JS, I am familiar with using AJAX to display the output from PHP/mySql that is not Json Encoded in the element "some_id" like this:

<script>
function addItem(value) {
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("some_id").innerHTML = xmlhttp.responseText;
          }
      }
      xmlhttp.open("GET","some_php.php?q="+value,true);
      xmlhttp.send();
}
</script>

However, when dealing with JSON encoded results from PHP/mySQL, how can I display it in "some_id" using AJAX?

javascript json ajax

Answer 1

Answer №1

To extract the JSON data, start by using JSON.parse():

If your data is structured like this:

{
    "result": "Example response"
}

You can follow a procedure similar to this one:

<script>
function fetchData(data) {
    let request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            //Convert string to object
            let json = JSON.parse(request.responseText);
            document.getElementById("some_id").innerHTML = json.result;
        }
    }
    request.open("GET", "example.php?q=" + data, true);
    request.send();
}
</script>

Answer 2

To extract the JSON data, start by using JSON.parse():

If your data is structured like this:

{
    "result": "Example response"
}

You can follow a procedure similar to this one:

<script>
function fetchData(data) {
    let request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
            //Convert string to object
            let json = JSON.parse(request.responseText);
            document.getElementById("some_id").innerHTML = json.result;
        }
    }
    request.open("GET", "example.php?q=" + data, true);
    request.send();
}
</script>

Answer 3

Answer №2

//sample_php.php
$input = $_POST['input'];
echo json_encode($input);   //Transform input into JSON data


<script>
function addData(input) {
    $.ajax({
        type: "POST",
        url: "sample_php.php",
        dataType: 'json',
        data: {input: input},
        success: function(response) {
            console.log(response);   //response is already in JSON format
        }
    });
}
</script>

Answer 4

//sample_php.php
$input = $_POST['input'];
echo json_encode($input);   //Transform input into JSON data


<script>
function addData(input) {
    $.ajax({
        type: "POST",
        url: "sample_php.php",
        dataType: 'json',
        data: {input: input},
        success: function(response) {
            console.log(response);   //response is already in JSON format
        }
    });
}
</script>

Answer 5

Answer №3

If you have retrieved your data from a MySQL database, let me illustrate with an example involving multiple fields.

yourdata.php

// After fetching data from MySQL
$data = new stdClass();
$data->email = $row['email'];
$data->phone = $row['phone_number'];
$data->age = $row['age'];
echo json_encode($data);

Now, in the file where you have implemented Ajax,

var xhttp = new XMLHttpRequest();
// Add the remaining code specific to your implementation
// Upon receiving response.text, perform the following
var data = xhttp.responseText;
var myData = data.toString();
var jsonObject = JSON.parse(myData);
// Extract each value from the JSON object
document.getElementById('divEmail').innerHTML = jsonObject.email;
document.getElementById('divPhone').innerHTML = jsonObject.phone;

The reason for stringifying data before parsing it in JavaScript is that JavaScript may struggle to interpret JSON data encoded in PHP. It is advisable to handle it this way to avoid errors.

var myData = JSON.Parse(xhttp.responseText);

I'm addressing this query while on the move, hence the presence of numerous comments. I hope this explanation proves beneficial.

Answer 6

If you have retrieved your data from a MySQL database, let me illustrate with an example involving multiple fields.

yourdata.php

// After fetching data from MySQL
$data = new stdClass();
$data->email = $row['email'];
$data->phone = $row['phone_number'];
$data->age = $row['age'];
echo json_encode($data);

Now, in the file where you have implemented Ajax,

var xhttp = new XMLHttpRequest();
// Add the remaining code specific to your implementation
// Upon receiving response.text, perform the following
var data = xhttp.responseText;
var myData = data.toString();
var jsonObject = JSON.parse(myData);
// Extract each value from the JSON object
document.getElementById('divEmail').innerHTML = jsonObject.email;
document.getElementById('divPhone').innerHTML = jsonObject.phone;

The reason for stringifying data before parsing it in JavaScript is that JavaScript may struggle to interpret JSON data encoded in PHP. It is advisable to handle it this way to avoid errors.

var myData = JSON.Parse(xhttp.responseText);

I'm addressing this query while on the move, hence the presence of numerous comments. I hope this explanation proves beneficial.

Tips for returning JSON data using AJAX

Answer №1

Answer №2

Answer №3

Similar questions

While working in Next.js, I utilized an `<Image />` tag with a link to an image, only to encounter an unexpected error

What is the best way to trigger an event function again once a specific condition has been satisfied?

JavaScript Bingo Game - Create Interactive Cell Selection

What is the syntax for implementing an if-else statement?

Combine children by grouping them using Rails' group_by method, then map

Creating an interactive online dashboard with real-time updates

Error occurs when attempting to execute JSON.parse within the backend of a Wordpress

Filtering data based on dates in AngularJS

Guide to creating a delayed response that does not block in Node and Express

What is the best way to add a "load more" button in a React application?

What is the best way to utilize Python in order to transform a large amount of unicode into characters to create a string-like appearance?

Encountering the 415 Unsupported Media Type error while using Spring 3.2

Crafting 3 intertwined combinations using the power of jQuery AJAX and PHP

Optimizing jQuery scripts by consolidating them to reduce file size

Unable to detect hover (etc) events after generating div elements with innerHTML method

Prevent scale animation for a specific section of the icon using CSS

Navigate to a PDF file from an HTML5 application using PhoneGap by accessing an external link

The Jquery .remove() function will only take effect after the second click

Adding multiple images from URLs to a ListView in a Java Android app is a common task that

Utilizing Async/Await with an Unassigned Object