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

巴黎香榭發表於2018-10-09
Python全棧WebjQuery跨域

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) + ")"


相關文章