有些情况需要请求和刷新部分资源，但是又不希望整个页面都刷新，这个时候就需要用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. java String int转换的不同方法

    参考了网上某篇日志的内容,现摘录如下: String转int: 最常见:int i = Integer.parseInt("123"); 罕见:Integer i= Integer ...

  2. 6U VPX 高性能计算存储板卡

    基于6U VPX的 XC7VX690T+C6678的双FMC接口雷达通信处理板   一.板卡概述 高性能VPX信号处理板基于标准6U VPX架构,提供两个标准FMC插槽,适用于电子对抗或雷达信号等领域 ...

  3. 用python实现js语言里的特性

    有大佬说:“搜 arraybuffer 的 polyfill 然后翻译成 python就行了” ...

  4. Linux crontab计划任务

    1.cron计划任务的描述        cron计划任务允许用户根据“时间表”自动周期的完成任务某些任务.        cron是一种system V服务,需要开启该服务才能使用.        ...

  5. cdn工作原理

    cdn工作原理 1.用户向浏览器输入www.web.com这个域名,浏览器第一次发现本地没有dns缓存,则向网站的DNS服务器请求: 2.网站的DNS域名解析器设置了CNAME,指向了www.web. ...

  6. python cv2的视频检测:睁眼闭眼

    如题,想实现一个简单的根据摄像头的某一帧检测睁眼闭眼的功能. 初步的想法是: 1. cv2调用计算机摄像头,读取某一帧的画面. 2. 将该画面作为 哈尔-人脸分类器的输入接口,根据分类器结果返回分类的 ...

  7. DevExpress中的gridControl选择问题

    在Dev控件中,gridControl是最常用的一个了. //直接通过gridView获取当前行 dr=this.gridView1.GetDataRow(this.gridView1.Focused ...

  8. QT中获取选中的radioButton的两种方法

    QT中要获取radioButton组中被选中的那个按钮,可以采用两种如下两种办法进行: 方法一:采用对象名称进行获取 代码: 1 QRadioButton* pbtn = qobject_cast&l ...

  9. React 错误处理(componentDidCatch)

    前言 看react 文档突然发现有这个 错误处理函数,好像是17年9月出的,这个真的绝了可以帮助我们捕捉错误咯 React 16 将提供一个内置函数 componentDidCatch,如果 rend ...

  10. linux系统下导出MySQL文件

    1.配置:从centOS6.5系统,MySQL数据库 2.导出.sql文件的命令: mysqldump -uroot -h116.228.90.147 -P18006 -p aimo > /ho ...