第二章 Flask与HTTP (4)_flask http双端通信

作者：知新_RL | 2024-02-08 18:21:08

踩

flask http双端通信

AJAX技术

1.认识AJAX

AJAX指异步Javascript和XML（Asynchronous JavaScript And XML），它不是编程语言或通信协议，而是一系列技术的组合体。简单来说，AJAX基于 XMLHttpRequest（ https://xhr.spec.whatwg.org/ ）让我们可以在不重载页面的情况下和服务器进行数据交换。加上JavaScript和DOM（Document Object Model，文档对象模型），我们就可以在接收到响应数据后局部更新页面。而XML指的则是数据的交互格式，也可以是纯文本（Plain Text）、HTML或JSON。

在Web程序中，很多加载数据的操作都可以在客户端使用AJAX实现。比如，当用户鼠标向下滚动到底部时在后台发送请求获取数据，然后插入文章；再比如，用户提交表单创建新的待办事项时，在后台将数据发送到服务器端，保存后将新的条目直接插入到页面上。

以删除某个资源为例，使用AJAX技术时的流程如下：

1）当单击“删除”按钮时，客户端在后台发送一个异步请求，页面不变，在接

收响应前可以进行其他操作。

2）服务器端接收请求后执行删除操作，返回提示消息或是无内容的204响应。

3）客户端接收到响应，使用JavaScript更新页面，移除资源对应的页面元

素。

2.使用jQuery发送AJAX请求

jQuery是流行的JavaScript库，它包装了JavaScript，让我们通过更简单的方式编写JavaScript代码。对于AJAX，它提供了多个相关的方法，使用它可以很方便地实现AJAX操作。更重要的是，jQuery处理了不同浏览器的AJAX兼容问题，我们只需要编写一套代码，就可以在所有主流的浏览器正常运行。

异步加载长文章示例


from jinja2.utils import generate_lorem_ipsum
 
@app.route('/post')
def show_post():
    post_body = generate_lorem_ipsum(n=2)  # 生成两段随机文本
    return ''' 
    <h1>A very long post</h1> 
    <div class="body">%s</div> 
    <button id="load">Load More</button> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
        $('#load').click(function() { 
            $.ajax({ 
                url: '/more', // 目标URL 
                type: 'get', // 请求方法 
                success: function(data){ // 返回2XX响应后触发的回调函数 
                    $('.body').append(data); // 将返回的响应插入到页面中 
                } 
            }) 
        }) 
    })
    </script>''' % post_body
 
 
@app.route("/more")
def load_post():
    return generate_lorem_ipsum(n=1)

在第二个script标签中，我们在代码的最外层创建了一个$（function（）{...}）函数，这个函数是常见的$（document）.ready（function（）{...}）函数的简写形式。这个函数用来在页面DOM加载完毕后执行代码，类似传统

JavaScript中的window.onload方法，所以我们通常会将代码包装在这个函数中。美元符号是jQuery的简写，我们通过它来调用jQuery提供的多个方法，所以 $.ajax（）等同于jQuery.ajax（）。

在$（function（）{...}）中，$（'#load'）被称为选择器，我们在括号中传入目标元素的id、class或是其他属性来定位到对应的元素，将其创建为jQuery

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/70332