解决跨域问题 Django-ajax

最新推荐文章于 2024-05-02 19:26:46 发布

莱米code

最新推荐文章于 2024-05-02 19:26:46 发布

阅读量124

点赞数

分类专栏： WEB前端 python 文章标签：跨域 django jsonp

本文链接：https://blog.csdn.net/qq1154479896/article/details/97616289

版权

WEB前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

python

6 篇文章 0 订阅

订阅专栏

实现功能

前端向后端跨域发出请求，将小写字母转为大写，动态添加到网页。
在这里插入图片描述

服务器端(python-Django)

views.py

def upWords(request):
    # get方法
    callBack = request.GET.get('callback')
    # 返回时建议使用占位符拼接，不然会解析错误
    return HttpResponse("%s('%s')" % (callBack, request.GET['value'].upper()))

启动django工程

	python manage.py runserver 0.0.0.0:8080

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="jquery-1.12.2.js"></script>
    <script src="AJax.js"></script>
</head>
<body>
<div>
    <p>输入: <input type="text" id="ipt"></p>
    <input type="button" value="提交" id="btn">
    <div>
        <p>结果：<span id="res"></span></p>
    </div>
</div>
</body>
</html>

原生JS实现

window.onload = function () {
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        var ipt = document.getElementById('ipt');
        var script = document.createElement('script');
        script.src = "http://10.2.0.200:8080?callback=callBack&value=" + ipt.value;
        document.head.appendChild(script);
        document.head.removeChild(script);
    };
};

function callBack(arg) {
    console.log(arg);
    var res = document.getElementById('res');
    res.innerText = arg;
}

jquery实现

$(function () {
    $("#btn").click(function () {
        $.ajax({
            url: "http://10.2.0.200:8080",
            dataType: "jsonp", // 必填，没有会出现跨域
            jsonpCallback: "callBack", // 回调函数的名字
            data: "value=" + $("#ipt").val(), // 传递的参数
            success: function (arg) {
                console.log(arg);
                $("#res").text(arg);
            }
        })
    })
});

莱米code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决跨域问题 Django-ajax

实现功能前端向后端跨域发出请求，将小写字母转为大写，动态添加到网页。服务器端(python-Django)views.pydef upWords(request): # get方法 callBack = request.GET.get('callback') # 返回时建议使用占位符拼接，不然会解析错误 return HttpResponse("%s('%...
复制链接

扫一扫