亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

Python全棧 Web（Ajax JQuery-AJAX 跨域請求）

來源：巴黎香榭 發(fā)布時間：2018-10-10 16:29:04 閱讀量：1204

摘要： Flask、Python、Django、框架、服務(wù)器、客戶端、瀏覽器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式開發(fā)



jQuery對AJAX的支持
$.ajax()
語法：
$.ajax({請求參數(shù)的json對象});
請求參數(shù)對象的屬性：
URL：字符串  表示異步請求地址
type：字符串 請求方式 get或post
date：傳遞到服務(wù)端的參數(shù) 參數(shù)字符串（"name=dfh&age15"）或json
datetype：響應(yīng)回來的數(shù)據(jù)格式
HTML
xml
text
script
json
jsonp：有關(guān)跨域的響應(yīng)了格式
success：
回調(diào)函數(shù)  響應(yīng)成功后的回調(diào)函數(shù)
error：
回調(diào)函數(shù)  請求或響應(yīng)失敗時的回調(diào)函數(shù)
beforSend：
回調(diào)函數(shù)  發(fā)送AJAX請求之前的回調(diào)函數(shù)
如果return False  則終止請求發(fā)送


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.js"></script></head><body>
    <h1>靜態(tài)網(wǎng)頁</h1>

    <p>
        uname <input type="text" id="uname">
    </p>
    <button id="btnajax">查詢</button>
    <p id="show"></p>
    <script>
        $(function () {
            $("#btnajax").click(function () {
                // 使用get請求發(fā)送一個uname參數(shù) 到服務(wù)器
                $.ajax({
                    // 請求地址
                    url: "/05-server1",
                    // 請求方式
                    type: "get",
                    // 請求參數(shù)
                    data: "uname=" + $("#uname").val(),
                    // 響應(yīng)回來的數(shù)據(jù)格式
                    dataType: 'json',
                    // 請求和響應(yīng)后的回調(diào)函數(shù)
                    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協(xié)議中有一個策略  "同源策略"
同源：
多個地址中 相同的協(xié)議 相同的域名 相同的端口
在HTTP中 必須是同源地址中 必須是同源地址才能相互
發(fā)送請求  非同源拒絕請求（<script>和<img>除外）

非同源的網(wǎng)頁相互發(fā)送請求的過程就是跨域
跨域只能接受GET請求 不能接受POST請求
跨域解決方案：
通過<script>標(biāo)記向服務(wù)器發(fā)送請求
由服務(wù)器資源指定前端頁面的那個方法來執(zhí)行響應(yīng)的數(shù)據(jù)
jQuery的跨域：
jsonp  json with padding
$.ajax({
url:"xxx",
type: "get",
dataType:'jsonp', //指定跨域訪問
jsonp: "callback", //定義了callback函數(shù)名 以便于callback傳遞過去的函數(shù)名
jsonpCallback:'xxx' //定義了傳遞過去函數(shù)的名字  jsonp的回調(diào)函數(shù)
});



<!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標(biāo)記
               var body = document.getElementsByTagName("body")[0];
               // 動態(tài)創(chuàng)建script標(biāo)記
               // 通過script請求響應(yīng)回來的數(shù)據(jù)一律當(dāng)成js腳本來執(zhí)行
               var script = document.createElement("script");
               // 設(shè)置script的type屬性  可以省略
               script.type = "text/javascript";
               // 網(wǎng)絡(luò)請求地址
               // callback 參數(shù)告訴后端 前端處理響應(yīng)數(shù)據(jù)的函數(shù)名
               script.src = "http://127.0.0.1:5000/06-server?callback=show";
               // 將標(biāo)記追加到當(dāng)前頁面  也就是向src的地址發(fā)送請求同時接受響應(yīng)數(shù)據(jù)
               // 響應(yīng)數(shù)據(jù)直接交給了頁面 頁面將響應(yīng)數(shù)據(jù)當(dāng)成js腳本程序執(zhí)行
               body.append(script);
           });
        });
    </script></body></html>



@app.route("/06-server")def server_06():
    # 接受前端傳遞過來的數(shù)據(jù) 也就是前端自定義的函數(shù)名
    fun = request.args.get("callback")
    # 響應(yīng)數(shù)據(jù) 被前端當(dāng)成js腳本執(zhí)行
    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> 出發(fā)  " + 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) + ")"


標(biāo)簽： Python
分享：
評論：
你還沒有登錄，請先

熱門文章

    推薦文章