jQuery使用ajax跨域请求获取数据

2023年6月11日上午11:22 • JavaScript

下面详细讲解“jQuery使用ajax跨域请求获取数据”的完整攻略。

1. 什么是跨域请求？

跨域请求指的是向一个不同域名（或者协议、端口）的服务器发起请求，这种请求是不被允许的。比如我们的web页面在访问http://www.example.com的时候，去请求http://www.baidu.com就属于跨域请求。

2. jQuery ajax 跨域请求的基本方法

要完成ajax跨域请求，我们需要使用jQuery的ajax函数，并在请求中设置一些参数。以下是一个最基础的ajax跨域请求的代码范例：

$.ajax({
    url: "http://www.example.com/api/data",
    dataType: "jsonp",
    success: function(data){
        console.log(data);
    },
    error: function(err){
        console.log(err);
    }
});

上面代码中，参数url指的是目标数据的地址，dataType指定数据类型，success和error分别是请求成功和失败时的回调函数。

需要注意的是，在发出ajax跨域请求时，需要先确认对方后端已经开启了跨域响应。一个简单的跨域响应使用php的示例如下：

<?php
header("Access-Control-Allow-Origin: *");
echo json_encode(array('name'=>'张三', 'age'=>20));
?>

上面代码可以实现在任何web域名都可以访问它，并返回一个JSON字符串。

3. jQuery ajax 跨域请求的几个要点

分析上面的代码可以发现，使用ajax跨域请求时要注意以下几个点：

要在跨域的服务器上准备好跨域响应
需要指定dataType为“jsonp”
在success回调函数中处理获取到的数据

这些点都非常重要，必须遵循才能顺利完成跨域请求。

4. 跨域请求示例

下面我们通过两个示例来说明跨域请求的实现:

示例一：百度搜索数据

比如在页面中要获取百度的搜索数据，我们可以使用jsonp来访问百度的API。以下是一个获取百度搜索数据的代码范例：

$.ajax({
    url: "https://www.baidu.com/su",
    data: {
        wd: "跨域请求"
    },
    dataType: "jsonp",
    jsonp: "cb",
    success: function(data){
        console.log(data);
    }
});

上面代码中，我们设置了请求目标为百度搜索框的接口，使用ajax方法来请求数据。我们传了一个名为wd的参数，并将值设置为“跨域请求”。然后将dataType设置为“jsonp”，表示我们期望得到的数据是JSONP格式。jsonp参数将请求的callback函数名指定为“cb”。请求成功后，将返回的数据在success回调函数中打印出来。

示例二：豆瓣电影数据

还有一个示例是通过豆瓣API来获取电影信息。这里我们使用豆瓣提供的JSONP API来获取数据。

$.ajax({
    url: "https://api.douban.com/v2/movie/search",
    data: {
        q: "钢铁侠"
    },
    dataType: "jsonp",
    jsonp: "callback",
    success: function(data){
        console.log(data);
    }
});

上面代码中，我们传给豆瓣的参数是q，值为“钢铁侠”。然后在dataType参数中设置为“jsonp”，并指定请求的callback为“callback”。请求成功后，将返回的数据在success回调函数中打印出来。