有些情况需要请求和刷新部分资源，但是又不希望整个页面都刷新，这个时候就需要用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. kali下纯文本与窗口环境切换

    切到纯文本环境,想返回 试了半天ctrl+alt+f7不行,  最后我想试试ctrl+alt+f8竟然成了: 而且那是之前以root账户登录图像界面时切换回去是f8,普通用户是f9 ,为何如此,我还不 ...

  2. Java语言利用Google的Thumbnailator处理图片

    导读:在Java中制作高质量的缩略图可能是一项相当困难的任务,或者图片质量高页面加载慢等等原因使需要对图片进行处理,但是又不想写太多的代码太麻烦去处理图片,那么就可以使用Thumbnailator—— ...

  3. 新手 vim常用命令总结 （转)

    转自 https://www.cnblogs.com/yangjig/p/6014198.html 在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的 ...

  4. 383-基于kintex UltraScale XCKU040的双路QSFP+光纤PCIe 卡

    一.板卡概述 本板卡系我司自主研发,基于Xilinx UltraScale Kintex系列FPGA  XCKU040-FFVA1156-2-I架构,支持PCIE Gen3 x8模式的高速信号处理板卡 ...

  5. Linux--操作系统基础及基础命令--01

    一.系统基础 1.三大部件: CPU:运算器.控制器.存储器 内存:CPU的数据只能从内存中读取,且内存数据是易失性的(页面) IO: 控制总线.数据总线 2.OS的管理 GUI:图形用户界面 GNO ...

  6. pycharm使用已经配置好的virtualenv环境

    前面已经介绍过基本的virtualenv使用方法,如想要了解的同学可以跳转https://www.cnblogs.com/weilijie/p/10964872.html 下面进入正题,我使用的是py ...

  7. Spring Framework Part4 self-summeries-a simplified MVC framework

    1.关于Spring Framework xml的头部 <?xml version="1.0" encoding="UTF-8"?> <bea ...

  8. Python excel读写

    # coding=utf-8 print "----------------分割线 xlrd--------------------" import xlrd #打开一个wordb ...

  9. 现代操作系统第三版高清.pdf中文版免费下载

    百度云盘:链接: https://pan.baidu.com/s/1i57XmxJ 密码: rmga

  10. 从位图图像中读取2D纹理（C ++，OpenGL）

    一共有2个.cpp文件和1个.h头文件 步骤: 需要安装GLUT,因为GLUT是第三方库,即它不是OpenGL的一部分.因此,它不是Windows系统API的一部分,因此不属于标准Windows SD ...