有些情况需要请求和刷新部分资源，但是又不希望整个页面都刷新，这个时候就需要用ajax来处理，即页面的某一部分触发请求和刷新内容

准备两个视图和html

from flask import Flask, render_template, request

app = Flask(__name__, static_url_path='')

@app.route('/')
def index():
    return 'hello world!'

@app.route('/content/')
def text_content():
    return render_template('content.html')

@app.route('/xhr/')
def text_xhr():
    return render_template('xhr.html')

if __name__ == '__main__':
    app.run(debug=True)

<h1>
    这是content.html
</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<body>
<h1>这是xhr.html</h1>
<div id="msg"></div>
<button id="btnGet">获取内容</button>
</body>
</html>

用ajax实现点击获取内容时，获取content的内容，并渲染到div里面显示

使用js写请求、获取数据、渲染数据操作

<script>
    function getData() {
        var xhr;
        // 通过浏览器对象实例化
        if (window.ActiveXObject) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        } else if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            throw new Error('当前浏览器不支持ajax');
        }

        //指定xhr状态变化时的事件关联
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById('msg').innerHTML = xhr.responseText;
            }
        };

        //初始化请求方式与地址
        xhr.open('GET', '/content/');
        xhr.send();  //发送请求
    }
</script>

再看个计算器的例子，实现乘法功能

from flask import Flask, render_template, request

app = Flask(__name__, static_url_path='')

@app.route('/calc/')
def calc():
    a = int(request.args.get('num1', 0))
    b = int(request.args.get('num2', 0))
    result = a * b
    return render_template('calc.html', result=result)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算</title>
</head>
<body>
<form action="#">
    <input type="text" id="num1" name="num1">
    *
    <input type="text" id="num2" name="num2">
    =
    <input type="text" id="result" name="result" value="{{ result if result else '' }}">
    <p>
        <input type="submit" value="点击计算">
    </p>
</form>
</body>
</html>

由于触发了提交请求，是页面整个刷新，返回来的只有计算结果，没有前面的值，就会造成这个情况，所以需要局部刷新

ajax实现

修改html和添加js脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算</title>
</head>
<body>
<input type="text" id="num1" name="num1">*<input type="text" id="num2" name="num2">
=<input type="text" id="result" name="result">
<p><button id="btnCalc" onclick="do_calc()">点击进行ajax计算</button></p>
</body>
</html>
<script>
    function do_calc() {
        var xhr = new XMLHttpRequest();
        var a = document.getElementById('num1').value;
        var b = document.getElementById('num2').value;

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById('result').value = xhr.responseText;
            }
        };
        xhr.open('GET', '/ajax_calc/?a=' + a + '&b=' + b);
        xhr.send();
    }
</script>

增加一个计算的视图

from flask import Flask, render_template, request

app = Flask(__name__, static_url_path='')

@app.route('/ajax_calc/')
def ajax_calc():
    a = int(request.args.get('a', 0))
    b = int(request.args.get('b', 0))
    result = a * b
    return str(result)

@app.route('/calc/')
def calc():
    a = int(request.args.get('num1', 0))
    b = int(request.args.get('num2', 0))
    result = a * b
    return render_template('calc.html', result=result)

这样就会保留所有数据，只进行局部的刷新了

测开之路一百五十一：ajax的作用和基本实现原理的更多相关文章

  1. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  2. 测开之路一百五十三：ajax之load、get、ajax在项目中的体现

    在查询的时候是使用ajax进行请求的 目录结构 personal.models from datetime import datetimefrom flask_sqlalchemy import SQ ...

  3. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

  4. 测开之路一百五十五：jquery-validation前台数据验证

    前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...

  5. 测开之路一百二十五：flask之urlencode参数传递和解析

    当get请求传参时,用?分隔参数和域名,用&分隔参数,如果参数里面本身就有&符号就会识别不出来,还是会当成分隔符,所以这些数据在传输的时候,就需要转义,现在普遍是转成urlencode ...

  6. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  7. 测开之路四十三：ajax请求

    ajax固定套路 function http(url, data, method, success, fail) { data = method == 'GET' ? data : JSON.stri ...

  8. 测开之路一百三十九：会话管理之cookie写入、读取、和更新

    机制:服务器端发送的小段文本信息存储在客户端硬盘 功能:记录用户偏好,请求.页面.站点间共享信息 特点:易丢失.安全隐患 添加cookie,需要用到make_respons.set_cookie @a ...

  9. 测开之路一百三十八：会话管理之session

    session管理和使用,需要用到flask的session模块和设置安全码:app.secret_key 比如列表页和编辑功能只能给admin用 列表页 编辑页 添加session 登录成功时,把u ...

随机推荐

  1. lilo - 安装引导装入程序

    总述 主要功能: ” /sbin/lilo” - 安装引导装入程序 辅助用途: ”/sbin/lilo –q” - 查询影射表 ”/sbin/lilo –R” - 设置下次启动的默认命令行 ”/sbi ...

  2. Spring Boot 学习杂记

    使用IntelliJ IDEA构建Spring Initializr

  3. Vue的css动画原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 19. ClustrixDB 执行计划解读

    EXPLAIN语句用于显示ClustrixDB查询优化器(也称为Sierra)如何执行INSERT.SELECT.UPDATE和DELETE语句.EXPLAIN的输出有三列: Operation - ...

  5. 为什么second是秒也是第二?

    起源 早期在西方,一小时分为 60 分钟.后来,科学发达了.文明进步了,人们认为一分钟太粗放了.必须划分得更细致,于是就把一分钟划分成 60 等分.由于是对时间的第二次划分,就将新的 60 等分的“单 ...

  6. 【webpack4】webpack4配置需要注意的问题

    需要注意的知识: 要全局安装webpack以及webpack cli,否则不能使用webpack指令 npm install webpack -g npm install webpack-cli -g ...

  7. TTTTTTTTTTTTTT POJ 3678 与或异或 2-SAT+强连通 模板题

    Katu Puzzle Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9129 Accepted: 3391 Descripti ...

  8. 苹果cms v10官网下载

    苹果CMS程序是一套采用PHP+MYSQL环境下运行的完善而强大的快速建站系统.经过近多年的开发经验和技术积累,苹果CMS程序已逐步走向成熟,在易用性和功能上已经成为同行中的佼佼者.程序体积小-> ...

  9. 当在本地磁盘服务(Windows)中无法删除指定分区时的解决方案

    有时候,我们在使用Windows管理磁盘分区时,可能会出现部分分区无法删除的情况,也就是说右键快捷菜单中没有删除卷的操作项. 此时,我们可以按照如下的步骤进行操作即可完成: Step 1: 以管理员身 ...

  10. Android应用源码航空订票软件客户端

    功能分类:其他     支持平台:Android     运行环境:Android 开发语言:Java     开发工具:Eclipse     源码大小:1.76MB   下载地址:http://w ...