How Can JSONP with jQuery and PHP Solve Cross-Origin Request Issues?

Cross-Origin Requests with JSONP: A Simple jQuery and PHP Example

In this example, we'll tackle the challenge of cross-origin requests using JSONP, an elegant technique that allows for communication between JavaScript and web servers from different domains.

Let's imagine you want to send a cross-origin request from a jQuery client to a PHP server and retrieve a customized response. To achieve this, we'll use jQuery's $.getJSON method to initiate a JSONP request.

jQuery Script:

$.getJSON('http://example.com/jsonp.php?callback=?', 'firstname=Jeff', function(response) {
  alert('Your name is ' + response.fullname);
});

PHP Server Script:

<?php $firstname = $_GET['firstname'];
if ($firstname == 'Jeff') {
  header('Content-Type: application/json');
  echo $_GET['callback'] . '(' . json_encode(['fullname' => 'Jeff Hansen']) . ')';
}
?>

Explanation:

When you call $.getJSON with a URL containing '?callback=?', jQuery automatically handles the JSONP request. The server-side PHP script responds with a JSON object wrapped in a function call that matches the callback provided by jQuery. In this case, the callback is passed as the first parameter in the GET request.

Handling HTML Responses:

If you'd like to return HTML in the response, you can use a function instead of a JSON object within the PHP script:

<?php $firstname = $_GET['firstname'];
if ($firstname == 'Jeff') {
  header('Content-Type: text/html');
  echo '<h1>Welcome, Jeff Hansen!';
}
?>

And on the jQuery side, you can handle the response as such:

$.getJSON('http://example.com/jsonp.php?callback=?', 'firstname=Jeff', function(response) {
  $('#container').html(response);
});

The above is the detailed content of How Can JSONP with jQuery and PHP Solve Cross-Origin Request Issues?. For more information, please follow other related articles on the PHP Chinese website!