JavaScript实现跨域请求

最新推荐文章于 2024-05-23 12:43:41 发布

Abraverman

最新推荐文章于 2024-05-23 12:43:41 发布

阅读量3.3k

点赞数 1

分类专栏： Python自学

本文链接：https://blog.csdn.net/qq_42874244/article/details/85201200

版权

Python自学专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、什么叫跨域请求

简单来说就是一个域通过某种方式请求到另一个域的数据，比如说百度请求京东的数据！这种方式适合有合作的两个公司！方法有以下几种！

二、具体方法jsonp、cors

问题
现在我需要请求到以下数据，这是一个django域名为“127.0.0.1:8001”的工程，我现在从django域名为“127.0.0.1:8006”的工程中的index.html的页面中提取这个数据

为了方便我直接将被请求的一方URL和函数写在一起

# url = http://127.0.0.1:8001/
from django.shortcuts import render,HttpResponse
import json
def myserver(request):
    info={"name":"yueyue","age":18,"price": 200}
    print("到了！")
    return HttpResponse(json.dumps(info))

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^myserver/', myserver),
]

请求方也做了同样的处理，请求方通过网页为客户端请求8001的数据

# url = http://127.0.0.1:8002/
def myserver(request):
    render(request, "kuayu.html")


urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^myserver/', myserver),
]

1、方法一、cors方法

第一种方法是通过操作后端来实现：
我们直接用ajax请求浏览器：

# 被请求体后端胆码
# 方法一：cors
def myserver(request):
    info={"name":"yueyue","age":18,"price": 200}
    response = HttpResponse(json.dumps(info))
    response["Access-Control-Allow-Origin"]="http://127.0.0.1:8002"  # 相当于怎加了白名单
    return response

# 请求端网页代码

<h3>QINGQIU</h3>
<input type="button" value="请求" id="My_but">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $("#My_but").click(function () {
        $.ajax({
            url:"http://127.0.0.1:8001/myserver/",
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>

点击按钮
在这里插入图片描述

会出错，但是服务端收到了请求!这个错误的意思是返回头缺少东西，然后我们改一下被请求端：

# 给请求头加了一些东西，成功了！
def myserver(request):
    info={"name":"yueyue","age":18,"price": 200}
    response = HttpResponse(json.dumps(info))
    response["Access-Control-Allow-Origin"]="http://127.0.0.1:8002"  # 相当于怎加了白名单
    return response

在这里插入图片描述

2、方法二：jsonp（伪ajax请求）

这个方法来修改客户端的请求也就是浏览器的请求，代码如下

# 被请求端后端代码
# 方法二：jsonp
def myserver(request):
    func = request.GET.get("callbacks")
    print("func", func)
    info={"name":"yueyue","age":18,"price": 200}
    return HttpResponse(" %s('%s')" % (func, json.dumps(info)))

下面是请求端前端代码：

<h3>QINGQIU</h3>
<input type="button" value="请求" id="My_but">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $("#My_but").click(function () {
        $.ajax({
             url:"http://127.0.0.1:8001/myserver/",
             type:"get",
             dataType:"jsonp",     // 伪造ajax  基于script
             jsonp: 'callbacks',
             //jsonpCallback:"alex",
             success:function (data) {
                 console.log(data)
             }
         })
    })
</script>

运行之后，如下：

在这里插入图片描述

补充：关于前端数据处理

对请求到的数据，关于标签的增删改查新方法：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域请求</title>
</head>
<body>
<h3>QINGQIU</h3>
<input type="button" value="请求" id="My_but">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    // 应用
    $("#My_but").click(function () {
        $.ajax({
            url: "http://www.jxntv.cn/data/jmd-jxtv2.html",
            type: "get",
            dataType: "jsonp",     // 伪造ajax  基于script
            jsonp: 'callbacks',
            jsonpCallback: "list",
            success: function (data) {
                //console.log(data.data);

                var html = "";
                $.each(data.data, function (index, weekday) {
                    console.log(weekday); // {week: "周一", list: Array(19)}

                    html += '<p>' + weekday.week + '</p>';

                    $.each(weekday.list, function (j, show) {
                        html += '<p><a href=' + show.link + '>' + show.name + '</a></p>'
                    })
                });
                $("body").append(html)
            }
        })
    })
</script>

人生苦短，我学Python！

Abraverman

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现跨域请求

一、什么叫跨域请求简单来说就是一个域通过某种方式请求到另一个域的数据，比如说百度请求京东的数据！这种方式适合有合作的两个公司！方法有以下几种！二、具体方法jsonp、cors问题现在我需要请求到以下数据，这是一个django域名为“127.0.0.1:8001”的工程，我现在从django域名为“127.0.0.1:8006”的工程中的index.html的页面中提取这个数据为了方便我直...
复制链接

扫一扫