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. java 判断5张牌的组成

    题目: 一副牌中发五张扑克牌给你,判断是四条,三带二.三带一加一.两对.一对.顺子.还是什么都不是. 控制台输入: 1,1,1,1,2 示例输出: 四条 Java方法的代码: static Strin ...

  2. Activity安装与使用

    详细安装步骤:http://blog.csdn.net/oyzl68/article/details/16817963

  3. MapReduce TopN（自主复习）

    1.MyTopN  主程序 package com.littlepage.topn; import org.apache.hadoop.conf.Configuration; import org.a ...

  4. Tensort之uff

    # This sample uses a UFF MNIST model to create a TensorRT Inference Engine from random import randin ...

  5. 【HDU2089】不要62

    题目大意:求区间 [n,m] 中数位不包含 4 和 62 的数字的个数. 题解:数位dp. 预处理出 \(f[i][j]\) 表示 i 位数字中以 j 为第一位的满足条件的数字个数. 对于统计答案来说 ...

  6. Perf Event ：Linux下的系统性能调优工具

    Perf Event :Linux下的系统性能调优工具 2011-05-27 10:35 刘 明 IBMDW 字号:T | T Perf Event 是一款随 Linux 内核代码一同发布和维护的性能 ...

  7. org.springframework.web.servlet.view.ContentNegotiatingViewResolver

    restful服务中一个重要的特性就是一种资源可以有多种表现形式,在springmvc中可以使用ContentNegotiatingViewResolver这个视图解析器来实现这种方式. 描述资源的三 ...

  8. jmeter之jtl文件解析（生成测试报告）命令行

    jmeter -g TestReport201905060302.jtl -o ./report 1:命令行模式将jtl转成测试图表-注意此方法只使用jmeter3.0以后版本 第一种:在测试过程中将 ...

  9. python 从入门到实践 第三章

    在第3章,你将学习如何在被称为列表的变量中存储信息集,以及如何通过遍历列表来操作其中的信息 写注释 # 代码越长 标识好代码的重要性 越来越重要要求习惯:在代码中编写清晰,简洁的注释开始研究更复杂的主 ...

  10. break continue exit return 的区别

    [root@localhost day1]# cat ss.sh #!/bin/bash for ((i=0;i<5;i++)) do if [ $i -eq 3 ] then break #c ...