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!</h1>'; } ?>
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!