jquery cross-domain get request data

In web development, we usually need to request data from another domain name to complete some specific business requirements. In this case, cross-domain requests are required. In this process, the get request of the jQuery framework is a very common method. This article will introduce how to use jQuery's get method to make cross-domain requests and obtain data.

1. What is a cross-domain request

In the same browser, if the domain name, port or protocol of the requested resource is different from the current document, it is called a cross-domain request. This is due to the browser's same-origin policy restriction, that is, only when the protocol, host name, and port number of the two URLs are the same, data from the same origin can be transmitted. When making a cross-domain request, the browser will automatically trigger a security mechanism to restrict requests from the current domain name to other domain names.

2. jQuery’s get method

jQuery is a cross-browser JavaScript library based on JavaScript. It is widely used to develop dynamic pages, standalone JavaScript applications and asynchronous requests. In jQuery, the get method belongs to the ajax module and is used to get data from the server through HTTP GET request.

When implementing a cross-domain request, we need to use the get method in jQuery to send a request and receive response data. This method needs to pass the following three parameters:

1. url: the URL address of the requested resource;
2. data: the data sent to the server;
3. success: the request is successful The subsequent callback function;

Among them, the success callback function is required and is used to process the data returned after the request is successful.

3. Cross-domain request example

Now we assume that there is an API interface that provides a set of data in JSON format, and we need to request this set of data from another domain name. The following is a simple JSON data format:

{ "name": "Apple", "color": "Red, Yellow, Green", "shape": "Round" }

Let's get the data in this JSON format through jQuery's get method:

$.get("https://api.example.com/fruits/apple", function(data) { console.log(data); });

Here we use the requested URL as the first parameter Passed to the get method. Through this method, we will send a Get request to the API interface and obtain the JSON data returned by the interface after the request is successful. This JSON data is passed to the data parameter in the callback function, and we can process the data in this function.

However, in actual use, the request may fail with an error message. In this case, we can use jQuery's fail method to get the error message.

$.get("https://api.example.com/fruits/apple", function(data) { console.log(data); }).fail(function() { console.log("请求失败"); });

In this example, we use the fail method to obtain the error information of the request. If the request fails, the console will print out the error message "Request failed". This way we can handle the error message accordingly.

4. Prerequisites for cross-domain requests

In cross-domain requests, the server needs to make some settings to allow requests from other domain names, otherwise the browser will block the request and display an error message. To solve this problem, we can add CORS (Cross-Origin Resource Sharing) header information on the server side to allow requests from other domain names.

In the API interface, we can add "Access-Control-Allow-Origin" to the HTTP response header to specify the origin of the allowed request. For example, in PHP, we can add the following code:

header("Access-Control-Allow-Origin: *");

In this example, the asterisk symbol means that requests from any domain name are allowed. If you only allow specific domain names to request data, you can replace the asterisk with the target domain name. For example, if you only allow example.com to request data, you can set it like this:

header("Access-Control-Allow-Origin: https://example.com");

Of course, if you are using Node.js, you can use frameworks such as Express and Koa to set the CORS header information. The following is a simple Express sample code:

const express = require('express'); const app = express(); // 添加CORS头信息 app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); // 返回JSON数据 app.get('/fruits/apple', (req, res) => { res.json({"name": "Apple", "color": "Red, Yellow, Green", "shape": "Round"}); }); // 监听端口 app.listen(3000, () => console.log('Example app listening on port 3000!'));

In this example, we use the Express framework to create an HTTP service and add CORS header information to the middleware. In the get request, we return a set of data in JSON format to the client. If everything works fine, the client should be able to successfully get the data.

5. Summary

Through the introduction of this article, we have learned what cross-domain requests are, how to use jQuery’s get method to perform cross-domain requests, and introduced some necessary settings on the server. Cross-domain requests are a common problem in web development. By using the jQuery framework, we can easily solve this problem and get data in a very efficient way.

The above is the detailed content of jquery cross-domain get request data. For more information, please follow other related articles on the PHP Chinese website!