Home > Backend Development > PHP Tutorial > How Can JSONP with jQuery and PHP Solve Cross-Origin Request Issues?

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

Barbara Streisand
Release: 2024-12-08 07:13:14
Original
665 people have browsed it

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);
});
Copy after login

PHP Server Script:

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

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>';
}
?>
Copy after login

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);
});
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template