JavaScript实现跨域请求

一、什么叫跨域请求

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

二、具体方法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!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值