Python全栈 Web（Ajax JQuery-AJAX 跨域请求）

来源：巴黎香榭 发布时间：2018-10-10 16:29:04 阅读量：1017

摘要： Flask、Python、Django、框架、服务器、客户端、浏览器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式开发



jQuery对AJAX的支持
$.ajax()
语法：
$.ajax({请求参数的json对象});
请求参数对象的属性：
URL：字符串  表示异步请求地址
type：字符串 请求方式 get或post
date：传递到服务端的参数 参数字符串（"name=dfh&age15"）或json
datetype：响应回来的数据格式
HTML
xml
text
script
json
jsonp：有关跨域的响应了格式
success：
回调函数  响应成功后的回调函数
error：
回调函数  请求或响应失败时的回调函数
beforSend：
回调函数  发送AJAX请求之前的回调函数
如果return False  则终止请求发送


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.js"></script></head><body>
    <h1>静态网页</h1>

    <p>
        uname <input type="text" id="uname">
    </p>
    <button id="btnajax">查询</button>
    <p id="show"></p>
    <script>
        $(function () {
            $("#btnajax").click(function () {
                // 使用get请求发送一个uname参数 到服务器
                $.ajax({
                    // 请求地址
                    url: "/05-server1",
                    // 请求方式
                    type: "get",
                    // 请求参数
                    data: "uname=" + $("#uname").val(),
                    // 响应回来的数据格式
                    dataType: 'json',
                    // 请求和响应后的回调函数
                    success: function (data) {
                        if (data.id){
                            // 如果data中有ID属性 说明查询成功
                            var html = "";
                            html += "<h3> id:" + data.id + "</h3>";
                            html += "<h3> uname:" + data.uname + "</h3>";
                            html += "<h3> upwd:" + data.upwd + "</h3>";
                            html += "<h3> realname:" + data.realname + "</h3>";

                        } else {
                            // 否则查询失败
                            html += "<h3>" + data.msg + "</h3>";
                        }
                        $("#show").html(html)
                    }
                });
            });
        });
    </script></body></html>



@app.route("/05-server1")def server_05_views():
    uname = request.args.get("uname")
    u = Users.query.filter_by(uname=uname).first()
    if u:
        return json.dumps(u.to_dict())
    dic = {
        "status": "0",
        "msg": "not username"
    }
    return json.dumps(dic)


跨域（Cross Domain）
什么是跨域？
HTTP协议中有一个策略  "同源策略"
同源：
多个地址中 相同的协议 相同的域名 相同的端口
在HTTP中 必须是同源地址中 必须是同源地址才能相互
发送请求  非同源拒绝请求（<script>和<img>除外）

非同源的网页相互发送请求的过程就是跨域
跨域只能接受GET请求 不能接受POST请求
跨域解决方案：
通过<script>标记向服务器发送请求
由服务器资源指定前端页面的那个方法来执行响应的数据
jQuery的跨域：
jsonp  json with padding
$.ajax({
url:"xxx",
type: "get",
dataType:'jsonp', //指定跨域访问
jsonp: "callback", //定义了callback函数名 以便于callback传递过去的函数名
jsonpCallback:'xxx' //定义了传递过去函数的名字  jsonp的回调函数
});



<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.js"></script></head><body>
    <button id="btn">跨域请求</button>
    <div id="show"></div>
    <script>


        function show(data){
            console.log(data);
        }

        $(function () {
           $("#btn").click(function () {
               // 无法完成跨域访问
               // var url = "http://127.0.0.1:5000/06-server"
               // $.get("/06-server", function (data) {
               //     $("#show").html(data)
               // });

               // 原生js完成跨域请求
               // 获取body标记
               var body = document.getElementsByTagName("body")[0];
               // 动态创建script标记
               // 通过script请求响应回来的数据一律当成js脚本来执行
               var script = document.createElement("script");
               // 设置script的type属性  可以省略
               script.type = "text/javascript";
               // 网络请求地址
               // callback 参数告诉后端 前端处理响应数据的函数名
               script.src = "http://127.0.0.1:5000/06-server?callback=show";
               // 将标记追加到当前页面  也就是向src的地址发送请求同时接受响应数据
               // 响应数据直接交给了页面 页面将响应数据当成js脚本程序执行
               body.append(script);
           });
        });
    </script></body></html>



@app.route("/06-server")def server_06():
    # 接受前端传递过来的数据 也就是前端自定义的函数名
    fun = request.args.get("callback")
    # 响应数据 被前端当成js脚本执行
    return fun + "('server 06')"





三种形式的跨域请求



<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.js"></script></head><body>
    <button id="btnShow">显示</button>
    <div id="show"></div>
    <script>
        function flight(data) {
            html = "";
            html += "<h3> 航班  " + data.flight + "</h3>";
            html += "<h3> 出发  " + data.from + "</h3>";
            html += "<h3> 到达  " + data.to + "</h3>";
            html += "<h3> 时间  " + data.time + "</h3>";
            $("#show").html(html);
        }
        $(function () {
           $("#btnShow").click(function () {
               // 原生跨域请求
               // var body = document.getElementsByTagName("body")[0];
               // var script = document.createElement("script");
               // script.type = "text/javascript";
               // script.src = "http://127.0.0.1:5000/07-server?callback=flight";
               // body.append(script);

               // jQuery跨域请求 jsonp
               // $.ajax({
               //     url: "http://127.0.0.1:5000/07-server",
               //     type: "get",
               //     dataType: "jsonp",
               //     jsonp: "callback",
               //     jsonpCallback: "flight"
               // });

               // jQuery跨域请求 jsonp
               $.ajax({
                   url:'http://127.0.0.1:5000/07-server',
                   type:'type',
                   dataType:'jsonp',
                   success:function (data) {
                       console.log(data.flight);
                       console.log(data.from);
                       console.log(data.to);
                       console.log(data.time);

                   }
               });

           });
        });
    </script></body></html>





@app.route("/07-server")def server_07():
    cb = request.args.get("callback")
    dic = {
        "flight": "MU763",
        "from": "beijing",
        "to": "saipan",
        "time": "16:55"
    }
    return cb + "(" + json.dumps(dic) + ")"


标签： Python
分享：
评论：
你还没有登录，请先

热门标签

热门文章

    推荐文章