With the rapid development of mobile Internet, more and more websites are beginning to use Web API to provide data services. When we use Web API to obtain data on the front end, we usually use AJAX to make asynchronous requests. However, due to the browser's same-origin policy restrictions, AJAX can only request data from the same-origin server, which limits the scope of the front-end's ability to obtain data.
In order to solve cross-domain problems, jsonP technology came into being. Let's learn more about the application of jsonP in front-end data acquisition.
1. JSONP Principle
JSONP (JSON with padding) is a cross-domain data transmission method. It makes cross-domain data requests and obtains JSON data by dynamically adding script tags. The principle of using JSONP in the front-end is as follows:
First, the front-end initiates a JSONP request to the server, and the request address is a cross-domain address. The URL of the JSONP request needs to contain a callback parameter. The backend generates the response JSON data based on this parameter and returns it to the frontend in the form of a function call. The frontend then parses and processes the response data.
The specific process is shown in the figure below:
2. The server responds to the JSONP request
The current end initiates a JSONP request, and the server needs to respond to the request correctly. For JSONP requests, the server needs to return a JavaScript function with a specified name, and call the JSON data generated by the server when the function is called. The following is an example of a JSONP response:
To summarize, the server needs to implement the following points:
- Receive the front-end request and generate JSON data based on the callback parameters;
- Pass JSON data as a parameter to the JavaScript function with the specified name;
- Write the entire response into the HTTP response body.
3. Front-end processing JSONP response
When the server correctly responds to the JSONP request, the front-end needs to correctly process the response data. What the front end needs to do is as follows:
- Create a function with the same name based on the function name specified by the callback parameter;
- Get the response JSON data and pass the JSON data to the front as a parameter Created function with the same name.
The following is an example of JSONP processing:
Finally, one thing we need to pay attention to is that when making a JSONP request, since the response data will be returned in the form of JavaScript, if If the returned data contains JavaScript statements, they need to be escaped, otherwise it will affect the execution of the front-end code. Common escape functions include jQuery’s $.parseJSON() function and JavaScript’s JSON.parse() function.
To be continued...
The above is the detailed content of php jsonp converts json data. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Linux new version
SublimeText3 Linux latest version

WebStorm Mac version
Useful JavaScript development tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
