Day17_1--AJAX学习之GET/POST传参
AJAX 简介
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。其实AJAX就可以理解为就是JS。通过AJAX也就实现了前后端分离，前端只写页面，后端生成数据！
现在开始通过实例学习：
1--GET传参
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<script>function ajax2() {//0:获取input内容let user = document.querySelector(".user").value;let pwd = document.querySelector(".pwd").value;//1:创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//2:配置后端请求--get请求参数用？和&来传参数xmlHttpRequest.open("get", "/stage1_war_exploded/ajax2?user="+user+"&pwd="+pwd, true)//3:发送请求xmlHttpRequest.send();//4:监听数据是否请求成功xmlHttpRequest.onreadystatechange = function () {//5:如果服务器成功解析数据则readyState=4,如果后端成功返回数据则state=200if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {//6:获取后端数据let data = xmlHttpRequest.responseText;//7:将数据插入前端页面document.getElementById("show").innerHTML = data;}}}</script>
<body>
<div id="show" style="border: 1px red; width: 200px;height: 100px">
</div>
账号<input type="text" class="user"><br>
密码<input type="text" class="pwd"><br>
<button onclick="ajax2()">提交</button>//当点击按钮后，调用ajax2()方法
</body>
</html>2--后端生产数据
@WebServlet("/ajax2")
public class ajax2 extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置编码req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");//后端获取get方式的参数就用getParameterString user = req.getParameter("user");String pwd = req.getParameter("pwd");PrintWriter writer = resp.getWriter();//将后端数据返回给前端writer.write("后端数据来了"+user+"-----"+pwd);}
}
3--POST传参
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<script>function ajax2() {//0:获取input内容let user = document.querySelector(".user").value;let pwd = document.querySelector(".pwd").value;//1:创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//2:配置后端请求xmlHttpRequest.open("post", "/stage1_war_exploded/ajax2", true);//3:发送请求//3_1:post请求必须设置请求头--一个单词都不能错：固定写法xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//3_2:发送请求和post参数———————其他地方和get相同xmlHttpRequest.send("user=" + user + "&pwd=" + pwd);//4:监听数据是否请求成功xmlHttpRequest.onreadystatechange = function () {//5:如果服务器成功解析数据则readyState=4,如果后端成功返回数据则state=200if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {//6:获取后端数据let data = xmlHttpRequest.responseText;//7:将数据插入前端页面document.getElementById("show").innerHTML = data;}}}
</script>
<body>
<div id="show" style="border: 1px red; width: 200px;height: 100px">
</div>
账号<input type="text" class="user"><br>
密码<input type="text" class="pwd"><br>
<button onclick="ajax2()">提交</button>
</body>
</html>相关文章：
Day17_1--AJAX学习之GET/POST传参
AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。其实AJAX就可以理解为就是JS。通过AJAX也就实现了前后端分离，前端只写页面，后端生成数据！ 现在开始通过实例学习： 1--GET传参 <!…...
golang国内proxy设置
go env -w GOPROXYhttps://goproxy.cn,direct经常使用的两个, goproxy.cn 和 goproxy.io 连接分别是 https://goproxy.cn https://goproxy.io 如果遇到某些包下载不下来的情况，可尝试更换数据源 更推荐使用https://goproxy.cn 速度快，缓存的包多 提醒…...
全网最适合入门的面向对象编程教程：31 Python的内置数据类型-对象Object和类型Type
全网最适合入门的面向对象编程教程：31 Python 的内置数据类型-对象 Object 和类型 Type 摘要： Python 中的对象和类型是一个非常重要的概念。在 Python 中,一切都是对象,包括数字、字符串、列表等,每个对象都有自己的类型。 原文链接： Fre…...
【mongodb】mongodb副本集的搭建和使用
本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》：python零基础入门学习 《python运维脚本》： python运维脚本实践 《shell》：shell学习 《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战 《k8…...
Java后端面试复习7.24
lock加锁解锁尝试获取锁方法lock底层基于什么实现lock和lock的底层实现分别面向什么用户lock和synchronized异同如何选择合适的锁ReentrantLock如何实现冲入内部类三个公平和非公平获取锁怎么实现的RL默认公平还是非公平，构造参数ReentrantRedaWriteLock的特性什么是…...
前端 HTML 概述
目录 1. HTML概述 1.1 超文本标记语言 1.2 标签 2. HTML 解析与编辑 2.1 解析与访问 2.2 编辑 html文件 1. HTML概述 HTML（ Hyper Text Markup Language：超文本标记语言 ）：主要用于网页主体结构的搭建，在网页上…...
探索Thymeleaf：用动态Web模板引擎打造吸引人的用户界面（SpringBoot的html详解）
什么是Thymeleaf？ Thymeleaf是一个用于Web和独立环境的现代服务器端Java模板引擎，用于处理XML/XHTML/HTML5内容。它特别适合基于Spring框架的Web应用程序，因为它提供了与Spring MVC的出色集成。Thymeleaf以其自然的模板语法和强大的数据绑定…...
视频教程 - 自研Vue3 Tree组件高级功能：虚拟滚动新增节点实现自动滚动
感谢小伙伴们对本套自研vue3 tree组件教程的关注，在前一篇媲美Element Plus JuanTree终极实战：虚拟滚动的功能演示中发现了小bug，特地整理了相关录屏来说明怎么一步步解决bug的，来回馈小伙伴们的支持。 Tree组件高级功能ÿ…...
职业生涯阶段总结3：转眼毕业三年
不知不觉，科班毕业三年多了，也换了三个单位了； 个人软件开发的理论和技术能力确实比以前刚出来的时候，强了不少； 在行情越发下滑的形势，似乎只有进大厂才能拿到不错的收入，但是大厂的压力也是比…...
项目经理面试总结
先上结论：每个公司问的问题侧重点都不太一样，五花八门，评判标准也不一样，目前我能感觉到的就是自己需要很了解项目，也就是工作过程中经常做出总结，需要你经常去思考，包括对内和对外的思考。 自我…...
（免费领源码）java#springboot#mysql大学校园旧物捐赠网站 25109-计算机毕业设计项目选题推荐
摘 要 在网络信息的时代，众多的软件被开发出来，给用户带来了很大的选择余地，而且人们越来越追求更个性的需求。在这种时代背景下，企业只能以用户为导向，按品种分类规划，以产品的持续创新作为企业最重要的竞…...
Java 设计模式之单例模式
Java 设计模式之单例模式 单例模式是一种创建型设计模式，它确保一个类只有一个实例，并提供了一种访问该实例的全局方法。这种模式有助于确保系统中的某些组件只有一个实例，并提供了一种方便的方法来访问该实例。 更多设计模式请参考&#x…...
Linux系统驱动（二）字符设备驱动
文章目录 一、概念（一）相关概念（二）字符设备框架结构（三）用户空间和内核空间数据传输1. 函数的参数对应关系 （四）字符设备相关的API1. 字符设备驱动（1）注册字…...
Day29 | 动态规划 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯
语言 Java 509. 斐波那契数 斐波那契数 题目 斐波那契数 （通常用 F(n) 表示）形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始，后面的每一项数字都是前面两项数字的和。也就是： F(0) 0，F(1) 1 F(n) F(n -…...
【开源移植】MultiButton_小型按键驱动模块移植
MultiButton 简介 MultiButton 是一个小巧简单易用的事件驱动型按键驱动模块，可无限量扩展按键，按键事件的回调异步处理方式可以简化你的程序结构，去除冗余的按键处理硬编码，让你的按键业务逻辑更清晰。 使用方法 1.先申请一个…...
【Python系列】Python 字典合并
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
C# 设计模式之装饰器模式
总目录 前言 装饰器模式的主要作用就是扩展一个类的功能，或给一个类添加多个变化的情况。学习面向对象的都知道，如果想单纯的给某个类增加一些功能，可以直接继承该类生成一个子类就可以。应对一些简单的业务场景继承也就够了，但是…...
【uniapp离线打包】（基于Android studio）
文章目录 uniapp打包官方教程入口一、准备工作(工具三大件)Android Studio版本推荐 二、准备工作（Android壳和uniapp包）导入Android壳生成uniapp包将uniapp包导入android壳降低jdk版本 三、准备工作（证书）准备Android平台离线签名…...
稳稳的年化10%，多任务时序动量策略——基于pytorch的深度学习策略（附python代码）
原创文章第608篇，专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 做因子挖掘这段时间，有一个观感。 传统的因子挖掘，尤其是手工构造因子，到遗传算法因子挖掘。——本身也是一种”拟合“，或者说试图”…...
C++分析AVL树
目录 AVL树介绍 AVL树平衡因子更新分析 AVL树插入时旋转与平衡因子更新 左单旋 右单旋 左右单旋 右左单旋 AVL旋转可行性 AVL树节点删除（待补充） AVL树分析 AVL树介绍 二叉搜索树在某些极端情况下可能会退化，为了解决这个问题&…...
aurora8b10b ip的使用（framing接口下的数据回环测试）
文章目录 一、Aurora8B/10B协议二、时钟、复位与状态指示1、时钟2、复位3、状态指示 三、数据发送、接受接口（1）AXI4-Stream位排序（2）Streaming接口（3）Framing接口（帧传输接口） 四、…...
如何通过OpenCV判断图片是否包含在视频内？
要判断图片是否包含在视频内，可以使用计算机视觉技术和图像处理方法。这通常涉及特征匹配或模板匹配。以下是一个基于OpenCV的解决方案，通过特征匹配的方法来实现这一目标。 步骤概述 读取视频和图片： 使用OpenCV读取视频文件和图片文件。 …...
大数据基础：Spark重要知识汇总
文章目录 Spark重要知识汇总 一、Spark 是什么 二、Spark 四大特点 三、Spark框架模块介绍 3.1、Spark Core的RDD详解 3.1.1、什么是RDD 3.1.2、RDD是怎么理解的 四、Spark 运行模式 4.1、Spark本地模式介绍 4.2、Spark集群模式 Standalone 4.3、Spark集群模式 Stan…...
Executable Code Actions Elicit Better LLM Agents
Executable Code Actions Elicit Better LLM Agents Github: https://github.com/xingyaoww/code-act 一、动机 大语言模型展现出很强的推理能力。但是现如今大模型作为Agent的时候，在执行Action时依然还是通过text-based（文本模态）后者JSO…...
循环结构(三)——do-while语句
目录 🍁引言 🍁一、语句格式 🚀格式1 🚀格式2 🍁二、语句执行过程 🍁三、实例 🚀【例1】 🚀【例2】 🚀【例3】 🍁总结 🍁备注 &am…...
pandas 或筛选
pandas 或筛选 在Pandas中，可以使用DataFrame.loc方法结合逻辑运算符来实现或筛选。这里提供一个简单的例子： import pandas as pd 创建示例DataFrame df pd.DataFrame({ ‘A’: [1, 2, 3, 4], ‘B’: [5, 6, 7, 8], ‘C’: [9, 10, 11, 12] }) 设定…...
工具（1）—截屏和贴图工具snipaste
演示和写代码文档的时候，总是需要用到截图。在之前的流程里面，一般是打开WX或者QQ，找到截图工具。但是尴尬的是，有时候，微信没登录，而你这个时候就在写文档。为了截个图，还需要启动微信…...
【从零开始一步步学习VSOA开发】快速体验SylixOS
快速体验SylixOS 安装完毕RealEvo-IDE 后，同时也安装了RealEvo-Simulator。RealEvo-Simulator 是一个虚拟运行环境，可以模拟各种体系结构并在其上运行 SylixOS。相比于物理板卡，在 RealEvo-Simulator 进行运行调测更加的方便快捷且成本低廉。…...
Ansible自动化：简化IT基础设施管理的艺术
目录 一.前言 二.Ansible简介 2.1什么是Ansible？ 2.2Ansible的主要特点 2.3Ansible的应用场景 三.探索Ansible的高级功能 3.1 高级Playbook特性 3.2 Ansible Vault 3.3 动态Inventory 3.4Ansible Tower（AWX） 3.5模块开发 3.6 Ans…...
【Rust光年纪】探索Rust语言中的WebSocket库和框架：优劣一览
Rust语言中的实时通信利器：WebSocket库与框架全面解析 前言 随着Rust语言的不断发展，其在Web开发领域也变得越来越受欢迎。WebSocket作为实现实时通信的重要技术，在Rust的生态系统中也有多个库和框架提供了支持。本文将介绍几个主流的Rust …...
福州网站建设推进/论坛外链代发
参考文档： 《Rockchip-Developer-Guide-Linux4.4-Thermal-CN》功耗计算 静态功耗公式： /* a、b、c、d、C是常量，在DTSI中配置，保持默认值即可，T是温度，V是电压，需要根据实际情况调整 */ t_scal…...
discuz上传wordpress/建网站软件
Java多线程 多线程 现实生活中，边吃饭边玩手机，大脑同时处理吃饭与玩手机两件事。 进程 程序是指令和数据的有序集合，静态概念。而进程就是一个程序的一次执行过程，是一个动态的概念。 线程 一个进程中包含若干个线…...
dede多个网站怎么做/网络关键词
在万物智能的全新时代，百度智能云正通过百度鸿鹄语音芯片赋能更多家居场景。 3月9日，在 TCL 春季新品发布会上，百度鸿鹄语音芯片首次在大家电行业中实现量产，是百度智能云落地智能家居业务场景的重要开局。 随着人工智能技术的快…...
国家安全文化建设网站/网络推广代理
5G消息是早在2008年就由GSMA提出的RCS业务，只是随着5G的到来，这项业务迎来了新的发展机会。5G消息实现了RCS（富媒体融合通信）Platform（平台）Chatbot（聊天机器人）三大功能！…...
兼容ie8的网站模板/搜索引擎关键词怎么选
最近，一部韩剧用极为狗血离谱荒谬的剧情，击碎了本平民对上流社会的想象，没错，它就是《顶楼》。里面的有钱人到底有多奇葩呢？歌唱家去别人家偷东西，也要穿上拖地礼裙；因为平民比自己专业技能强&a…...
免费下载建设银行官方网站下载/今日新闻最新消息
Quartz 是 OpenSymphony 开源组织在任务调度领域的一个开源项目，完全基于 Java 实现。作为一个优秀的开源调度框架，Quartz 具有功能强大，应用灵活，易于集成的特点 目前项目处于运维阶段中期，事情不多，所以有…...