Python全栈 Web(Ajax JQuery-AJAX 跨域请求)

简介: 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) + ")"


相关文章
|
15天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
101 44
|
11天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
25 1
|
16天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
29 2
|
1月前
|
SQL 关系型数据库 数据库
优化Web开发流程:Python ORM的优势与实现细节
【10月更文挑战第4天】在Web开发中,数据库操作至关重要,但直接编写SQL语句既繁琐又易错。对象关系映射(ORM)技术应运而生,让开发者以面向对象的方式操作数据库,显著提升了开发效率和代码可维护性。本文探讨Python ORM的优势及其实现细节,并通过Django ORM的示例展示其应用。ORM提供高级抽象层,简化数据库操作,提高代码可读性,并支持多种数据库后端,防止SQL注入。Django内置强大的ORM系统,通过定义模型、生成数据库表、插入和查询数据等步骤,展示了如何利用ORM简化复杂的数据库操作。
58 6
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
82 1
|
1月前
|
前端开发 API 开发者
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
36 4
|
1月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
50 2
|
1月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
41 3
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
安全 API 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
在当前的Web开发中,Python因能构建高效简洁的RESTful API而备受青睐,大大提升了开发效率和用户体验。本文将介绍RESTful API的基本原则及其在Python中的实现方法。以Flask为例,演示了如何通过不同的HTTP方法(如GET、POST、PUT、DELETE)来创建、读取、更新和删除用户信息。此示例还包括了基本的路由设置及操作,为开发者提供了清晰的API交互指南。
107 6