ajax除了用原生的js实现之外，也可以使用jquery实现，而且用jquery更方便

看一个简单的示例，保留上一篇的content路由和html，实现上一篇一样的功能，点击获取内容，局部刷新

准备一个页面用于被调用

<h1>这是content.html的h1标签</h1>
<p style="background: red">
    这是content.html的p标签，红色
    <a href="https://www.baidu.com/">百度</a>
</p>
<div style="background: blue">这是content.html的div标签，蓝色</div>
<div style="background: yellow" class="my-cls">这是content.html的div标签，黄色</div>

路由

from flask import Flask, render_template, request

app = Flask(__name__, static_url_path='')

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

请求

方法一：$().load(url, 回调函数)

新建一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax </title>
    {#引入jquery#}
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<button id="btnLoad">点击获取content内容</button>
</body>
</html>
{#指定事件触发时，jquery请求并/content/并加载内容#}
<script>
    $(document).ready(function () {
        $('#btnLoad').click(function () {
            $('#content').load('/content/');
        });
    });
</script>

路由

from flask import Flask, render_template, request

app = Flask(__name__, static_url_path='')

@app.route('/jquery_ajax/')
def jquery_ajax():
    return render_template('ajax-basic.html')

请求

点击

load支持回调函数

load支持筛选渲染，如值渲染div.class=my-cls的标签

只展示p标签下的a标签

方法二：$.get(url, [get参数，可不传], 回调函数)

<script>
    $(document).ready(function () {
        $('#btnGet').click(function () {
            $.get('/content/' , null, function (response) { // 这里的response即get的响应结果
                $('#content').html(response);
            });
        });
    });
</script>

方法三：$.ajax

<script>
    $(document).ready(function () {
        $('#btnAjax').click(function () {
            $.ajax({
                url: '/content/',
                method: 'GET',
                data: null,
                success: function (response) {
                    $('#content').html(response);
                }
            });
        });
    });
</script>

测开之路一百五十二：基于jquery的ajax实现之load、get、ajax的更多相关文章

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

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

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

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

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

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

  4. 测开之路一百五十一：ajax的作用和基本实现原理

    有些情况需要请求和刷新部分资源,但是又不希望整个页面都刷新,这个时候就需要用ajax来处理,即页面的某一部分触发请求和刷新内容 准备两个视图和html from flask import Flask, ...

  5. 测开之路一百四十二：ORM框架之SQLAlchemy建库、建表、数据库操作

    flask-SQLAlchemy是在原生SQLAlchemy的基础之上做了一层封装,安装flask-SQLAlchemy会自动安装SQLAlchemy 安装 传统的sql建表建字段 通过flask-S ...

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

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

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

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

  8. 测开之路一百一十二：bootstrap按钮

    bootstrap按钮 引入bootstrap和jquery 普通按钮和bootstrap风格按钮 调整大小 块级按钮 禁用按钮 disabled 按钮分组 分页按钮

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

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

随机推荐

  1. Delphi 字符型数据

  2. hostname - 显示或设置系统的主机名

    NAME(名称) hostname - 显示或设置系统的主机名 domainname - 显示或设置系统的NIS/YP域名 dnsdomainname - 显示系统的DNS域名 nisdomainna ...

  3. 转载：一种云环境下SaaS软件部署方法及装置与流程

    转载:http://www.xjishu.com/zhuanli/55/201710103925.html 本发明涉及云计算技术领域,特别是涉及一种云环境下SaaS软件部署方法及装置. 背景技术: 随 ...

  4. multi gpu inference with tfserving or keras

    在tfserving上,目测只能在每个gpu上起docker    https://github.com/tensorflow/serving/issues/311#issuecomment-4801 ...

  5. etl-p

    java excel 导入数据库 上传文件包  解压导入excel包 导入mysql

  6. JVM metaspace元空间

    元空间的本质和永久代类似,都是对JVM规范中方法区的实现. 元空间不在虚拟机中,而是使用本地内存. 用于元空间的JVM参数:   -XX:MetaspaceSize=N 初始化Metaspace大小, ...

  7. 【hiho1041】国庆出游 dfs+bitset

    题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,现遍历整棵树,要求每条边仅被经过两次,问是否存在一种特定的遍历方式使得 dfs 序中节点的相对前后关系符合给定的顺序. 题解: 首先,由于要 ...

  8. Python 爬虫插件

    #coding:utf-8import sys,urllib2,re,Queuesys.path.append("..") from lib.Http_Class import H ...

  9. autogen.sh 的使用

    在linux下面的大型工程很多都是makefile管理的,但是随着工程越来越大,makefile编写又成了一个大工程,这个时候出现了两个比较流行的工具,cmake和configure,configur ...

  10. 基于Ubuntu 搭建 WordPress 个人博客 - 开发者实验室 - 腾讯云

    1.准备 LAMP 环境 安装 Apache2 在终端输入该命令 ,使用 apt-get 安装 Apache2: sudo apt-get install apache2 -y 安装好后,您可以通过访 ...