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

Challenges with handling Ajax responses in Ruby on Rails

What could be the reason these two functions yield different outcomes?

Validation of forms in Angular using a pseudo submission method

How to style TextInput to display dollar amounts when using onChangeText and Redux in React Native

How to add JSON data into a specific column of a table using

The capability to scroll within a stationary container

Incapable of modifying the text within a div container

Alter the functionality of the input element that has a tag of 'multiple'

Incorrect input

Is it possible to manipulate CSS on a webpage using javascript?

"Error in Visual Studio: Identical global identifier found in Typescript code

Struggling to construct a project using parcel, continually encountering issues with unsupported file types

AJAX forms and snippets

I am sorry, but it seems like there is an issue with the definition of global in

A JavaScript function that smoothly scrolls an element into view while considering any scrollable or positioned parent elements

App crash on IOS only occurs when running on a physical device, but not when running on the simulator

JQ: Transforming data with a PigLatin-inspired FLATTEN operation

Sending both old and new data through a submission function

Experiencing a missing handlebars helper error when utilizing a helper within partials in express-handlebars

The issue of execution order in JavaScript Recursion with promises