Provide the Ajax caller with a JSON object exclusively

Question

Provide the Ajax caller with a JSON object exclusively

Is there a way to retrieve only the array in my success callback instead of the entire HTML page?

$.ajax({
  'URL': 'getData.php',
  success:function(data){
    alert(data); //I'm currently getting the whole html file
  }
})

getData.php

<?php
 //Populate the array with database content

 echo json_encode( $columns );

?>

How can I access only the contents of $columns without the additional markup?

Note: My PHP file consists solely of PHP code.

This is what appears when using the alert function:

https://i.sstatic.net/XqNQL.jpg

javascript json ajax

Answer 1

Answer №1

Ensure that your script returns a JSON string, as the HTML in it cannot be parsed.

I understand what you're saying - you can use JSON.parse(string) in JavaScript to parse the JSON sent by PHP.

Make sure that your PHP code only returns encoded JSON and no other strings or HTML.

Here is the updated JS code that should work correctly. You can check the desired output in the browser console.

$.ajax({
  'URL': 'getData.php',
  success:function(data){
    data = JSON.parse(data);
    console.log(data);
    alert(data); //Entire HTML file
  }
})

Answer 2

Ensure that your script returns a JSON string, as the HTML in it cannot be parsed.

I understand what you're saying - you can use JSON.parse(string) in JavaScript to parse the JSON sent by PHP.

Make sure that your PHP code only returns encoded JSON and no other strings or HTML.

Here is the updated JS code that should work correctly. You can check the desired output in the browser console.

$.ajax({
  'URL': 'getData.php',
  success:function(data){
    data = JSON.parse(data);
    console.log(data);
    alert(data); //Entire HTML file
  }
})

Answer 3

Answer №2

Setting the dataType and URL without single quotes is essential for the code to function correctly.

Here is an example of how you can implement this:

 $.ajax({ 
    type: 'GET', 
    url: 'fetchData.php', 
    dataType: 'json',
    success: function (data) { 
        $.each(data, function(index, element) {
            /* Perform operations on each array element */
        });
    }
});

Answer 4

Setting the dataType and URL without single quotes is essential for the code to function correctly.

Here is an example of how you can implement this:

 $.ajax({ 
    type: 'GET', 
    url: 'fetchData.php', 
    dataType: 'json',
    success: function (data) { 
        $.each(data, function(index, element) {
            /* Perform operations on each array element */
        });
    }
});

Provide the Ajax caller with a JSON object exclusively

getData.php

Answer №1

Answer №2

Similar questions

Adapter is failing to show the accurate information

Persisting jQuery UI position in database and showing it on the screen

Ensure that the div automatically scrolls to the bottom when it is loaded, and also when new data is added - using angular

Why is it that Object.getOwnPropertyDescriptors does not function on HTMLElements?

What is the best method to pass a JavaScript file array to a Node.js server?

Setting Metadata Dynamically in Vue Router

What's the best way to test a simple Bearer Strategy implementation in Passport.js using Postman?

Step-by-step guide on adding a new array to a JSON file within an Android application

Error: Unable to convert undefined or null values to an object - encountered while attempting to run a MySQL query within the router

My PHP script is not functioning correctly with Ajax

Issue with AJAX POST request not retrieving data from PHP MySQL database using AJAX

Fetching real-time Twitter search feeds through dynamic AJAX requests

Comparing various object fields to a single input value in JavaScript

What is the best way to overlay a 2D text layer on top of a Three.js scene?

How to effectively test a form submission with an external API using React, Jest, and Enzyme?

Guide to customizing the Autocomplete jQuery plugin to mimic Google's result replacement feature

Looping through a JSON object in Highcharts to populate data series

Problems with radio button serialization in jQuery form plugin

The data extracted from JSON is not directly displayed on the user interface

Having trouble receiving a response from the server?