Error is being returned by the JSONP callback

Question

Error is being returned by the JSONP callback

Looking to grasp JSONP. Based on my online research, I've gathered that it involves invoking a function with a callback. Other than that, is the way data is handled and the data format similar to JSON?

I'm experimenting with JSONP as shown below, but I'm encountering an error. Can you please provide a detailed explanation?

Script.js

function test(){
jQuery.ajax({
  url: "/plugins/system/chat/jsonstr.php",
  dataType: "jsonp",
  jsonpCallback: "logResults"
});

jsonstr.php

logResults(){
    $arr = '[{
        "title": "keren",
        "picture": "http://something.png",
        "id":1
    }, {
        "title": "diana",
        "picture": "/plugins/system/conversekit/conversekit/images/avatar.png",
        "id": 2
    }]';
    echo $arr;
}

I anticipate that this call will return a JSON object so that I can manipulate it in the success function of test. However, I am getting the following error message:

<br />
<b>Parse error</b>: syntax error, unexpected '{' in <b>C:\projects\easysocial.com\plugins\system\conversekit
\jsonstr.php</b> on line <b>14</b><br />

The URL displayed in the console is:

GET http://mysite.localhost.com/plugins/system/chat/jsonstr.php?callback=logResults

javascript php jquery json ajax

Answer 1

Answer №1

When using logResults() in JavaScript, remember that it is a callback function and not a PHP function. The jsonstr.php file should only return valid JSON data.

To achieve this, your jsonstr.php file should be structured like this:

<?php

 $arr = [
            [
                'title' => "keren",
                'picture' => "http://something.png",
                'id' => 1,
            ],
            [
                'title' => "diana",
                'picture' => "/plugins/system/conversekit/conversekit/images/avatar.png",
                'id' => 2,
            ],
        ];

echo(json_encode($arr));

In addition, make sure your Script.js file is set up correctly:

function logResults() {
    console.log('ajax done');
}

function test(){
    jQuery.ajax({
      url: "/plugins/system/chat/jsonstr.php",
      dataType: "jsonp",
      jsonpCallback: logResults
    });
}

Answer 2

When using logResults() in JavaScript, remember that it is a callback function and not a PHP function. The jsonstr.php file should only return valid JSON data.

To achieve this, your jsonstr.php file should be structured like this:

<?php

 $arr = [
            [
                'title' => "keren",
                'picture' => "http://something.png",
                'id' => 1,
            ],
            [
                'title' => "diana",
                'picture' => "/plugins/system/conversekit/conversekit/images/avatar.png",
                'id' => 2,
            ],
        ];

echo(json_encode($arr));

In addition, make sure your Script.js file is set up correctly:

function logResults() {
    console.log('ajax done');
}

function test(){
    jQuery.ajax({
      url: "/plugins/system/chat/jsonstr.php",
      dataType: "jsonp",
      jsonpCallback: logResults
    });
}

Answer 3

Answer №2

There are a couple of things to consider:

The server-side script you're using isn't returning any data, which you can see in the Net pane of your browser's developer tools.
It's important to note that JSONP is primarily used to work around cross-site permission issues in AJAX, not as a means for PHP and JavaScript to directly interact (which isn't possible). So when you mention wanting a callback function named logResults, you actually need a JavaScript function.

If you want to utilize JSONP effectively, follow these steps:

Ensure your server is returning actual JSONP (not just JSON) by modifying your code like this:

$callback = filter_INPUT(INPUT_GET, 'callback');
// ...
echo sprintf('%s(%s);', $callback, $json);

Create a JavaScript function to handle the response data:

function logResults(data) {
    alert(data[0].title);
}

This approach essentially results in a dynamically generated traditional <script> tag that loads a basic script:

logResults([{
        "title": "keren",
        "picture": "http://something.png",
        "id": 1
    }, {
        "title": "diana",
        "picture": "/plugins/system/conversekit/conversekit/images/avatar.png",
        "id": 2
    }]);

Given that you're making an AJAX call within your own domain:

url: "/plugins/system/chat/jsonstr.php",
     ^^
      No need for the "http://example.com/" prefix pointing to a third-party site

... JSONP may not be necessary at all; plain JSON should suffice for your requirements.

Answer 4

There are a couple of things to consider:

The server-side script you're using isn't returning any data, which you can see in the Net pane of your browser's developer tools.
It's important to note that JSONP is primarily used to work around cross-site permission issues in AJAX, not as a means for PHP and JavaScript to directly interact (which isn't possible). So when you mention wanting a callback function named logResults, you actually need a JavaScript function.

If you want to utilize JSONP effectively, follow these steps:

Ensure your server is returning actual JSONP (not just JSON) by modifying your code like this:

$callback = filter_INPUT(INPUT_GET, 'callback');
// ...
echo sprintf('%s(%s);', $callback, $json);

Create a JavaScript function to handle the response data:

function logResults(data) {
    alert(data[0].title);
}

This approach essentially results in a dynamically generated traditional <script> tag that loads a basic script:

logResults([{
        "title": "keren",
        "picture": "http://something.png",
        "id": 1
    }, {
        "title": "diana",
        "picture": "/plugins/system/conversekit/conversekit/images/avatar.png",
        "id": 2
    }]);

Given that you're making an AJAX call within your own domain:

url: "/plugins/system/chat/jsonstr.php",
     ^^
      No need for the "http://example.com/" prefix pointing to a third-party site

... JSONP may not be necessary at all; plain JSON should suffice for your requirements.

Error is being returned by the JSONP callback

Answer №1

Answer №2

Similar questions

Can someone guide me on how to extract checkbox values in a post method using Angular

Tips for revealing a hidden HTML tag

An application designed to generate a compilation of multiple documents

Trouble with saving the positioning after drag and drop

Unidentified googletagmanager detected in vendors segment

Sending the factory's response back to the controller in AngularJS

Execute various settimeout or display functions on various elements of a webpage

Unearthing the worth of the closest button that was clicked

Incorporate the previous page's location path into the next page using Props in Gatsby Link

What is the best way to send a JSON response from a Symfony2 controller?

Struggling to make dynamically created SVG 'use' elements function properly

Effective Management of Unwanted Postbacks in VB.NET with Ajax UpdatePanel

Create a drag-and-drop interface and link elements together using a custom JavaScript library

Acquire the current audio video stream directly from the web browser

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

Instructions on how to eliminate the minutes button from Material UI datetime picker

What is the process for incorporating a new task into my HTML/CSS/JavaScript to-do list application when the Enter key is pressed?

Error encountered while trying to eliminate array element

Develop a client-side API utilizing various libraries

Enhance your SVG image in D3 by incorporating a drop-shadow effect