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. Xadmin

    一.安装 Xadmin pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2 二.导出文件 在公司开发中如何知道项目里别 ...

  2. 关于mysql的查询优化

    由于工作原因,最近甲方客户那边多次反应了他们那边的系统查询速度慢,经过排除之后,发现他们那边的数据库完全没有用到索引,简直坑得一笔,通过慢查询日志分析,为数据表建立了适当的索引之后,查询速度明显的提高 ...

  3. bcdedit删除uefi多余项

    1.检查是否有多余的启动项:用管理员权限的cmd运行Bcdedit /enum firmware 2.保存现在的所有引导项Bcdedit /export savebcdsavebcd是导出的文件名 3 ...

  4. 点亮指路灯led

    为什么要使用LED? (bootloader,kernel)开发初期,由于串口等硬件尚未被初始化,因此调试手段相当有限,这时通常会采用LED来做为程序调试的重要手段. LED驱动设计: 1.设置GPI ...

  5. 四、Signalr手持令牌验证

    一.JWT 服务端在respose中设置好cookie,浏览器发请求都会自动带上,不需要做额外设置 但是如果客户端是非浏览器,或者要兼容多种客户端,这个方法就不行了 Js端 @{ Layout = n ...

  6. web框架-（五）Ajax

    Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScript和X ...

  7. 前端每日实战：158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  8. CSS-overflow-scroll 滑动粘手

    长列表的滑动,CSS属性给了 overflow: auto:在IOS上可能会出现“粘手”效果,即滑动很慢.卡顿.粘手 解决: 启动硬件加速渲染: -webkit-overflow-scrolling: ...

  9. Python 分页和shell命令行模式

    前言 除了手动添加你的文章后外,你还可以用命令行来添加,python 自带了一种命令行 就是 shell 快速添加博文:Shell命令行模式 在你的目录下:mysite python manage.p ...

  10. pyqt5--QTDesigner--安装与配置

    安装: 安装PyQt5-tools 文件--->设置---> ---> 安装之后在 安装目录\Lib\site-packages\pyqt5_tools  找到 designer.e ...