第二十一章 Jquery ajax

文章目录

    • 1. jquery下载
    • 2. jquery的使用
    • 3. jquery页面加载完毕执行
    • 4. jquery属性控制
    • 6. 遍历器
  • 2. ajax
    • 1. 准备后台服务器
    • 2. ajax发送get请求
    • 3. ajax发送post请求

1. jquery下载

点击下载

稳定版本1.9
在这里插入图片描述

2. jquery的使用

存放到html文件的同级目录
在这里插入图片描述

3. jquery页面加载完毕执行

<script src="jquery.js"></script>
<script>$(function(){})
</script>

jquery的选择器
$(“.”) 类选择
$(“*”)id选择

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery.js"></script><script>$(function(){$("#btn").click(function(){ //id选择console.log("点击了一下")})})</script></head>
<body><input type="button" id="btn" value="按钮">
</body>
</html>

4. jquery属性控制

  1. val()
  2. text()
  3. html()
  4. attr()
  5. css()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery.js"></script><script>$(function(){$("#btn").click(function(){let val = $(".wb").val();//选择class=wb的文本框,获取文本框内的值//获取文本后清理文本框$(".wb").val("")//将获取到的文本,丢到div中去$(".mydiv").html($(".mydiv").html() + val + "<br/>");});})</script></head>
<body><input type="button" id="btn" value="按钮"><input type="text" name="txt" class="wb"><hr/><div class="mydiv"></div>
</body>
</html>

在这里插入图片描述

设置/获取CSS样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery.js"></script><script>$(function(){$("#btn").click(function(){let display = $(".mydiv").css("display"); //获取CSS的样式if(display=='none'){$(".mydiv").css("display","block"); //配置CSS样式} else {$(".mydiv").css("display","none");}});})</script></head>
<body><input type="button" id="btn" value="按钮"><input type="text" name="txt" class="wb"><hr/><div class="mydiv" style="width:500px;height:50px;display:none;">测试</div>
</body>
</html>
  • attr()
<script>$(function(){$("#btn").click(function(){$(".mydiv").attr("id","Jack")console.log($(".mydiv").attr("id"))})})
</script>

6. 遍历器

each

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery.js"></script><script>$(function(){$("ul>li").each(function(i,data){console.log(i)console.log($(data).text())})})</script>
</head>
<body>
<ul><li>Jack</li><li>Lucy</li><li>Tom</li><li>Jary</li>
</ul>
</body>
</html>

2. ajax

1. 准备后台服务器

用Flask来搭建一个后台服务

pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple
from flask import Flaskapp = Flask(__name__)@app.route("/")
def root():print("访问根目录")return "网站首页"if __name__ == '__main__':app.run()

在这里插入图片描述

使用render_template引入网页

from flask import Flask, render_templateapp = Flask(__name__)@app.route("/")
def root():print("访问根目录")name = "Jack"return render_template("index.html",data=name)if __name__ == '__main__':app.run()

在这里插入图片描述

新建static放入jquery
在这里插入图片描述

2. ajax发送get请求

    <script src = "./static/jquery.js"></script><script>$(function(){//页面加载运行$(".btn").click(function(){//点击按钮触发事件$.ajax({//发送ajax请求url:"/btn_get",method:"get",data:{name:"",pwd:"mima",},headers:{refer:"https://www.baidu.com",},//另一种请求头beforeSend: function(req){req.setRequestHeader("refer2","https://www.other.baidu.com")},success:function(d){console.log(d);}})})})
  • 接收get请求数据
@app.route("/btn_get")
def func_get():name = request.args.get("name")pwd = request.args.get("pwd")if not name or not pwd:return "请输入用户或密码"print(name,pwd)return "登录成功"

3. ajax发送post请求

<script>$(function(){$(".btn2").click(function(){$.ajax({url:"/btn_post",method:"post",data:JSON.stringify({name:"Tom",pwd:"mima",}),headers:{"Content-Type": "application/json",},dataType:"text",success:function(d){console.log(d);}})})})</script>
  • 接收json数据
@app.route("/btn_post",methods=["POST"])
def func_post():response = make_response("Hello world")response.headers['Content-Type']= 'text/html; charset=utf-8'data = request.jsonprint(data)return "收到post请求"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/290003.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文《Exploring to Prompt for Vision-Language Models》阅读

论文《Exploring to Prompt for Vision-Language Models》阅读 论文概况论文动机&#xff08;Intro&#xff09;MethodologyPreliminaryCoOp[CLASS]位置Context 是否跨 class 共享表示和训练 ExperimentsOverall ComparisonDomain GeneralizationContext Length (M) 和 backbon…

【C语言】linux内核tcp_push函数

一、讲解 这个 tcp_push 函数是在Linux内核的TCP网络栈实现中&#xff0c;用于推动TCP缓冲区中待发送数据包的传输。这段代码需要在具备操作系统和网络编程知识背景下来解释。下面我将分步骤用中文逐一讲解这个函数的作用&#xff1a; 1. struct tcp_sock *tp tcp_sk(sk);&am…

Docker搭建LNMP环境实战(07):安装nginx

1、模拟应用场景描述 假设我要搭建一个站点&#xff0c;假设虚拟的域名为&#xff1a;api.test.site&#xff0c;利用docker实现nginxphp-fpmmariadb部署。 2、目录结构 2.1、dockers根目录 由于目前的安装是基于Win10VMWareCentOS虚拟机&#xff0c;同时已经安装了VMWareT…

冒泡排序(六大排序)

冒泡排序 冒泡排序的特性总结&#xff1a; 1. 冒泡排序是一种非常容易理解的排序 2. 时间复杂度&#xff1a;O(N^2) 3. 空间复杂度&#xff1a;O(1) 4. 稳定性&#xff1a;稳定 动图分析&#xff1a; 代码实现&#xff1a; Swap(int*p1,int*p2) {int tmp *p1;*p1*p2…

网络稳定性(蓝桥省赛)

0网络稳定性 - 蓝桥云课 (lanqiao.cn) 知识点&#xff1a;克鲁斯卡尔生成树&#xff0c;lca&#xff0c;倍增 最小生成树的模板&#xff1a;最小生成树【模板】-CSDN博客 题解代码如下&#xff1a; #include<bits/stdc.h> using namespace std; const int N3e5100; co…

ssh 公私钥(github)

一、生成ssh公私钥 生成自定义名称的SSH公钥和私钥对&#xff0c;需要使用ssh-keygen命令&#xff0c;这是大多数Linux和Unix系统自带的标准工具。下面&#xff0c;简单展示如何使用ssh-keygen命令来生成具有自定义名称的SSH密钥对。 步骤 1: 打开终端 首先&#xff0c;打开我…

用Kimichat快速识别出图片中的表格保存到Excel

如果有一张图片格式的表格&#xff0c;想要快速复制到Excel表格中&#xff0c;那么一般要借助于OCR工具。之前试过不少在线OCR工具&#xff0c;识别效果差强人意。其实&#xff0c;kimichat就可以非常好的完成这个任务。 下面是一张研报中的表格&#xff0c;只能以图片形式保存…

RTOS线程切换的过程和原理

0 前言 RTOS中最重要的一个概念就是线程&#xff0c;线程的按需切换能够满足RTOS的实时性要求&#xff0c;同时能将复杂的需求分解成一个个线程执行减轻我们开发负担。 本文从栈的角度出发&#xff0c;详细介绍RTOS线程切换的过程和原理。 注&#xff1a;本文参考的RTOS是RT-T…

DataX-Oracle新增writeMode支持update

目录 前言 第一步下载源码 第二步修改源码 1、Oraclewriter 2、WriterUtil 2.1、修改getWriteTemplate方法 2.2、新增onMergeIntoDoString与getStrings方法 3、CommonRdbmsWriter 3.1、修改startWriteWithConnection 3.2、修改doBatchInsert 3.3、修改fillPreparedStatem…

单例模式如何保证实例的唯一性

前言 什么是单例模式 指一个类只有一个实例&#xff0c;且该类能自行创建这个实例的一种创建型设计模式。使用目的&#xff1a;确保在整个系统中只能出现类的一个实例&#xff0c;即一个类只有一个对象。对于频繁使用的对象&#xff0c;“忽略”创建时的开销。特点&#xff1a…

zedboard+AD9361 运行 open WiFi

先到github上下载img&#xff0c;网页链接如下&#xff1a; https://github.com/open-sdr/openwifi?tabreadme-ov-file 打开网页后下载 openwifi img 用win32 Disk lmager 把文件写入到SD卡中&#xff0c;这一步操作会把SD卡重新清空&#xff0c;注意保存数据。这个软件我会…

基于SpringBoot和Vue的在线视频教育平台的设计与实现

今天要和大家聊的是一款基于SpringBoot和Vue的在线视频教育平台的设计与实现 &#xff01;&#xff01;&#xff01; 有需要的小伙伴可以通过文章末尾名片咨询我哦&#xff01;&#xff01;&#xff01; &#x1f495;&#x1f495;作者&#xff1a;李同学 &#x1f495;&…

mysql--事务四大特性与隔离级别

事务四大特性与隔离级别 mysql事务的概念事务的属性事务控制语句转账示例 并发事务引发的问题脏读脏读场景 不可重复读幻读幻读场景 事务的隔离级别读未提交读已提交可重复读&#xff08;MySQL默认&#xff09; 总结 mysql事务的概念 事务就是一组操作的集合&#xff0c;他是一…

STM32时钟简介

1、复位&#xff1a;使时钟恢复原始状态 就是将寄存器状态恢复到复位值 STM32E10xxx支持三种复位形式,分别为系统复位、上电复位和备份区域复位。 复位分类&#xff1a; 1.1系统复位 除了时钟控制器的RCC_CSR寄存器中的复位标志位和备份区域中的寄存器以外,系统 复位将复位…

leetcode热题100.柱状图中最大的矩形

Problem: 84. 柱状图中最大的矩形 文章目录 题目思路复杂度Code 题目 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;hei…

Qlib-Server:量化库数据服务器

Qlib-Server:量化库数据服务器 介绍 Qlib-Server 是 Qlib 的配套服务器系统,它利用 Qlib 进行基本计算,并提供广泛的服务器系统和缓存机制。通过 Qlib-Server,可以以集中的方式管理 Qlib 提供的数据。 框架 Qlib 的客户端/服务器框架基于 WebSocket 构建,这是因为 WebS…

OpenHarmony中的LLDB高性能调试器

概述 LLDB&#xff08;Low Lever Debugger&#xff09;是新一代高性能调试器。详细说明参考 LLDB官方文档 。 当前OpenHarmony中的LLDB工具是在 llvm15.0.4 基础上适配演进出来的工具&#xff0c;是HUAWEI DevEco Studio工具中默认的调试器&#xff0c;支持调试C和C应用。 工…

镜视界 | DevSecOps CI/CD 管道中数字供应链安全的集成策略

目录 前言 数字供应链&#xff08;DSC&#xff09;的定义 数字供应链安全的重点内容和风险因素 CI/CD管道的安全目标和可信实体 将数字供应链安全集成到CI/CD管道中 结语 本文字数&#xff1a;7715&#xff0c;阅读时长&#xff1a;19分钟 1.前言 在敏捷开发的模式下&…

SnapGene 5 for Mac 分子生物学软件

SnapGene 5 for Mac是一款专为Mac操作系统设计的分子生物学软件&#xff0c;以其强大的功能和用户友好的界面&#xff0c;为科研人员提供了高效、便捷的基因克隆和分子实验设计体验。 软件下载&#xff1a;SnapGene 5 for Mac v5.3.1中文激活版 这款软件支持DNA构建和克隆设计&…

StarRocks实战——多点大数据数仓构建

目录 前言 一、背景介绍 二、原有架构的痛点 2.1 技术成本 2.2 开发成本 2.2.1 离线 T1 更新的分析场景 2.2.2 实时更新分析场景 2.2.3 固定维度分析场景 2.2.4 运维成本 三、选择StarRocks的原因 3.1 引擎收敛 3.2 “大宽表”模型替换 3.3 简化Lambda架构 3.4 模…