当前位置: 首页 > news >正文

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 是一种在无需重新加载整个网页的情况下&#xff0c;能够更新部分网页的技术。其实AJAX就可以理解为就是JS。通过AJAX也就实现了前后端分离&#xff0c;前端只写页面&#xff0c;后端生成数据&#xff01; 现在开始通过实例学习&#xff1a; 1--GET传参 <!…...

golang国内proxy设置

go env -w GOPROXYhttps://goproxy.cn,direct经常使用的两个, goproxy.cn 和 goproxy.io 连接分别是 https://goproxy.cn https://goproxy.io 如果遇到某些包下载不下来的情况&#xff0c;可尝试更换数据源 更推荐使用https://goproxy.cn 速度快&#xff0c;缓存的包多 提醒…...

全网最适合入门的面向对象编程教程:31 Python的内置数据类型-对象Object和类型Type

全网最适合入门的面向对象编程教程&#xff1a;31 Python 的内置数据类型-对象 Object 和类型 Type 摘要&#xff1a; Python 中的对象和类型是一个非常重要的概念。在 Python 中,一切都是对象,包括数字、字符串、列表等,每个对象都有自己的类型。 原文链接&#xff1a; Fre…...

【mongodb】mongodb副本集的搭建和使用

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》&#xff1a;python零基础入门学习 《python运维脚本》&#xff1a; python运维脚本实践 《shell》&#xff1a;shell学习 《terraform》持续更新中&#xff1a;terraform_Aws学习零基础入门到最佳实战 《k8…...

Java后端面试复习7.24

lock加锁解锁尝试获取锁方法lock底层基于什么实现lock和lock的底层实现分别面向什么用户lock和synchronized异同如何选择合适的锁ReentrantLock如何实现冲入内部类三个公平和非公平获取锁怎么实现的RL默认公平还是非公平&#xff0c;构造参数ReentrantRedaWriteLock的特性什么是…...

前端 HTML 概述

目录 1. HTML概述 1.1 超文本标记语言 1.2 标签 2. HTML 解析与编辑 2.1 解析与访问 2.2 编辑 html文件 1. HTML概述 HTML&#xff08; Hyper Text Markup Language&#xff1a;超文本标记语言 &#xff09;&#xff1a;主要用于网页主体结构的搭建&#xff0c;在网页上…...

探索Thymeleaf:用动态Web模板引擎打造吸引人的用户界面(SpringBoot的html详解)

什么是Thymeleaf&#xff1f; Thymeleaf是一个用于Web和独立环境的现代服务器端Java模板引擎&#xff0c;用于处理XML/XHTML/HTML5内容。它特别适合基于Spring框架的Web应用程序&#xff0c;因为它提供了与Spring MVC的出色集成。Thymeleaf以其自然的模板语法和强大的数据绑定…...

视频教程 - 自研Vue3 Tree组件高级功能:虚拟滚动新增节点实现自动滚动

感谢小伙伴们对本套自研vue3 tree组件教程的关注&#xff0c;在前一篇媲美Element Plus JuanTree终极实战&#xff1a;虚拟滚动的功能演示中发现了小bug&#xff0c;特地整理了相关录屏来说明怎么一步步解决bug的&#xff0c;来回馈小伙伴们的支持。 Tree组件高级功能&#xff…...

职业生涯阶段总结3:转眼毕业三年

不知不觉&#xff0c;科班毕业三年多了&#xff0c;也换了三个单位了&#xff1b; 个人软件开发的理论和技术能力确实比以前刚出来的时候&#xff0c;强了不少&#xff1b; 在行情越发下滑的形势&#xff0c;似乎只有进大厂才能拿到不错的收入&#xff0c;但是大厂的压力也是比…...

项目经理面试总结

先上结论&#xff1a;每个公司问的问题侧重点都不太一样&#xff0c;五花八门&#xff0c;评判标准也不一样&#xff0c;目前我能感觉到的就是自己需要很了解项目&#xff0c;也就是工作过程中经常做出总结&#xff0c;需要你经常去思考&#xff0c;包括对内和对外的思考。 自我…...

(免费领源码)java#springboot#mysql大学校园旧物捐赠网站 25109-计算机毕业设计项目选题推荐

摘 要 在网络信息的时代&#xff0c;众多的软件被开发出来&#xff0c;给用户带来了很大的选择余地&#xff0c;而且人们越来越追求更个性的需求。在这种时代背景下&#xff0c;企业只能以用户为导向&#xff0c;按品种分类规划&#xff0c;以产品的持续创新作为企业最重要的竞…...

Java 设计模式之单例模式

Java 设计模式之单例模式 单例模式是一种创建型设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供了一种访问该实例的全局方法。这种模式有助于确保系统中的某些组件只有一个实例&#xff0c;并提供了一种方便的方法来访问该实例。 更多设计模式请参考&#x…...

Linux系统驱动(二)字符设备驱动

文章目录 一、概念&#xff08;一&#xff09;相关概念&#xff08;二&#xff09;字符设备框架结构&#xff08;三&#xff09;用户空间和内核空间数据传输1. 函数的参数对应关系 &#xff08;四&#xff09;字符设备相关的API1. 字符设备驱动&#xff08;1&#xff09;注册字…...

Day29 | 动态规划 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

语言 Java 509. 斐波那契数 斐波那契数 题目 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n -…...

【开源移植】MultiButton_小型按键驱动模块移植

MultiButton 简介 MultiButton 是一个小巧简单易用的事件驱动型按键驱动模块&#xff0c;可无限量扩展按键&#xff0c;按键事件的回调异步处理方式可以简化你的程序结构&#xff0c;去除冗余的按键处理硬编码&#xff0c;让你的按键业务逻辑更清晰。 使用方法 1.先申请一个…...

【Python系列】Python 字典合并

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

C# 设计模式之装饰器模式

总目录 前言 装饰器模式的主要作用就是扩展一个类的功能&#xff0c;或给一个类添加多个变化的情况。学习面向对象的都知道&#xff0c;如果想单纯的给某个类增加一些功能&#xff0c;可以直接继承该类生成一个子类就可以。应对一些简单的业务场景继承也就够了&#xff0c;但是…...

【uniapp离线打包】(基于Android studio)

文章目录 uniapp打包官方教程入口一、准备工作(工具三大件)Android Studio版本推荐 二、准备工作&#xff08;Android壳和uniapp包&#xff09;导入Android壳生成uniapp包将uniapp包导入android壳降低jdk版本 三、准备工作&#xff08;证书&#xff09;准备Android平台离线签名…...

稳稳的年化10%,多任务时序动量策略——基于pytorch的深度学习策略(附python代码)

原创文章第608篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 做因子挖掘这段时间&#xff0c;有一个观感。 传统的因子挖掘&#xff0c;尤其是手工构造因子&#xff0c;到遗传算法因子挖掘。——本身也是一种”拟合“&#xff0c;或者说试图”…...

C++分析AVL树

目录 AVL树介绍 AVL树平衡因子更新分析 AVL树插入时旋转与平衡因子更新 左单旋 右单旋 左右单旋 右左单旋 AVL旋转可行性 AVL树节点删除&#xff08;待补充&#xff09; AVL树分析 AVL树介绍 二叉搜索树在某些极端情况下可能会退化&#xff0c;为了解决这个问题&…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...

SQL进阶之旅 Day 22:批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...

使用ch340继电器完成随机断电测试

前言 如图所示是市面上常见的OTA压测继电器&#xff0c;通过ch340串口模块完成对继电器的分路控制&#xff0c;这里我编写了一个脚本方便对4路继电器的控制&#xff0c;可以设置开启时间&#xff0c;关闭时间&#xff0c;复位等功能 软件界面 在设备管理器查看串口号后&…...

中国政务数据安全建设细化及市场需求分析

(基于新《政务数据共享条例》及相关法规) 一、引言 近年来,中国政府高度重视数字政府建设和数据要素市场化配置改革。《政务数据共享条例》(以下简称“《共享条例》”)的发布,与《中华人民共和国数据安全法》(以下简称“《数据安全法》”)、《中华人民共和国个人信息…...