JQuery封装的ajax

1. 注意:
  • 首先要导jq的包
  • json对象可以用 . 调用key
  • java只能给前端传页面,或者打印的内容
  • String jsonstr = json.toJSONString(resultJSON); //将对象转为JSON对象

Json格式和参数解释:

<script src="js/jquery-1.10.2.min.js"></script>  //导包
$(function (){$("button").click(function (){$.ajax({url:"/indexServlet",//请求路径servlet,如果一直拼会麻烦(即使是post也可以拼)type:"get",//默认是getasync:"true",//布尔值,请求是否异步处理,默认异步,false是同步data:{uname:"123",upwd:"123"},//请求数据dataType:"json",//返回值类型success:function (res) {$("h1").text(res.msg);msg1=res.msg;} ,error: function (code, msg) {// 请求失败后的回调函数console.log("Error Code: " + code);   // 输出错误代码console.log("Error Message: " + msg); // 输出错误信息}});});});

1.实现前端与java通信:

使用get,通过?把参数传递到后端,后端用getParameter接收

这里的res是返回值,通过out.println(msg);把参数传递给json

后端:通过 PrintWriter 将消息发送到前端。

<body>
<h1>未登录</h1>
<button>ajax</button>
<script src="js/jquery-1.10.2.min.js"></script>
<script>$(function (){$("button").click(function (){$.ajax({url:"/indexServlet?name=111",//请求路径servlettype:"get",success:function (res) {$("h1").text(res);}})});});
</script>
</body>

    @Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setCharacterEncoding("utf-8");String name = req.getParameter("name");System.out.println(name);String msg="登陆成功";PrintWriter out = resp.getWriter();out.println(msg);}

2.ajax是异步的

这里的alert弹出的值是空白的

这里的1和2是同时进行的,这种就叫异步

所以当alert(msg)时,ajax还没有返回值,所以就导致弹出的是空白

<h1>未登录</h1>
<button>ajax</button>
<script src="js/jquery-1.10.2.min.js"></script>
<script>$(function (){var msg="";$("button").click(function (){$.ajax({url:"/indexServlet?name=111",//请求路径servlettype:"get",success:function (res) {$("h1").text(res);msg=res;}})});alert(msg);});
</script>

3.将String转为json

像这样使用String j = "{\"code\":200,\"msg\":\"张三\"}";来传递json对象,太麻烦了,所以下面有阿里巴巴的包可以简单一些

dataType:"json",//返回值类型

 PrintWriter out = resp.getWriter();String id = req.getParameter("id");String pwd = req.getParameter("pwd");System.out.println(id+pwd);if (id.equals("123")&&pwd.equals("123")){String j = "{\"code\":200,\"msg\":\"张三\"}";out.println(j);}else {out.println("登陆失败");}

但是这样是String类型的,我们需要转成json类型的

需要使用fastjson-1.2.13.jar这个包,导到lib里面

就像这样使用JSONObject来将字符串转为json对象传出去

    @Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setCharacterEncoding("utf-8");resp.setContentType("application/json");  // 设置返回类型为 JSONPrintWriter out = resp.getWriter();String uname = req.getParameter("uname");String upwd = req.getParameter("upwd");JSONObject jsonObject = new JSONObject();//{}System.out.println("===="+uname+upwd);if (uname.equals("123")&&upwd.equals("123")){jsonObject.put("code",200);//{code:200}jsonObject.put("msg","登陆成功");//{code:200,msg:”登陆成功“}}else {jsonObject.put("code",400);jsonObject.put("msg","登陆失败");//{code:200,msg:”登陆失败“}}out.println(jsonObject);}
}

然后前端可以通过.来调用json对象的值

就像res.msg;

 $(function (){$("button").click(function (){$.ajax({url:"/indexServlet",//请求路径servlet,如果一直拼会麻烦(即使是post也可以拼)type:"get",async:"false",//表示请求是否异步处理,默认异步,false是同步data:{uname:"123",upwd:"123"},dataType:"json",//返回值类型success:function (res) {$("h1").text(res.msg);}});});});

3.2.返回json数组

使用JSONArray jsonArray = new JSONArray();//[{},{},{}]

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setCharacterEncoding("utf-8");resp.setContentType("application/json");  // 设置返回类型为 JSONPrintWriter out = resp.getWriter();String uname = req.getParameter("uname");String upwd = req.getParameter("upwd");JSONObject jsonObject = new JSONObject();//{}JSONArray jsonArray = new JSONArray();//[{},{},{}]System.out.println("===="+uname+upwd);if (uname.equals("123")&&upwd.equals("123")){jsonObject.put("code",200);//{code:200}jsonObject.put("msg","登陆成功");//{code:200,msg:”登陆成功“}}else {jsonObject.put("code",400);jsonObject.put("msg","登陆失败");//{code:200,msg:”登陆失败“}}jsonArray.add(jsonObject);out.println(jsonArray);}

4.ResultJSON来统一格式化结果

它的目的是将服务器处理后的结果(如状态码、消息和数据)结构化并统一格式化为 JSON 形式,以便客户端(如前端 JavaScript)能够轻松地解析和处理这些数据。

(记得带上get set toString)

public class ResultJSON {private int code;    // 状态码,通常 200 表示成功,其他表示失败或错误private String msg;   // 响应消息private Object data;  // 可能包含的附加数据(可以是任意类型)

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setCharacterEncoding("utf-8");resp.setContentType("application/json");  // 设置返回类型为 JSONPrintWriter out = resp.getWriter();String uname = req.getParameter("uname");String upwd = req.getParameter("upwd");ResultJSON resultJSON = null;//这是我们自定义封装的类,目的是统一json对象System.out.println("===="+uname+upwd);if (uname.equals("123")&&upwd.equals("123")){resultJSON = new ResultJSON(200,"登陆成功");}else {resultJSON = new ResultJSON(400,"登陆失败");}JSONObject json = new JSONObject();//{}String jsonstr = json.toJSONString(resultJSON); //将对象转为JSON对象out.println(jsonstr);}

4.1如果到时有传对象:
    public ResultJSON getUserList() {// 假设我们从数据库查询到了一些用户数据List<User> users = new ArrayList<>();users.add(new User("john_doe", "john.doe@example.com"));users.add(new User("jane_doe", "jane.doe@example.com"));// 使用 ResultJSON 封装结果return new ResultJSON(200, "查询成功", users);}

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

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

相关文章

文献解读-DNAscope: High accuracy small variant calling using machine learning

关键词&#xff1a;基准与方法研究&#xff1b;基因测序&#xff1b;变异检测&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;DNAscope: High accuracy small variant calling using machine learning标题&#xff08;中文&#xff09;&#xff1a;DNAsc…

vue中如何关闭eslint检测?

ESLint作为一个用于JavaScript代码的验证工具&#xff0c;主要用于检查代码语法和编码规范。本文旨在指导那些希望在Vue.js项目中禁用ESLint验证功能的用户。对于需要这一操作的朋友&#xff0c;以下内容将提供参考。 vue中如何关闭eslint检测&#xff1f; 有了eslint的校验&…

用vscode编写verilog时,如何有信号定义提示、信号定义跳转(go to definition)、模块跳转这些功能

&#xff08;一&#xff09;安装插件SystemVerilog - Language Support 安装一个vscode插件即可&#xff0c;插件叫SystemVerilog - Language Support。虽然说另一个插件“Verilog-HDL/SystemVerilog/Bluespec SystemVerilog”也有信号提示及定义跳转功能&#xff0c;但它只能提…

️️一篇快速上手 AJAX 异步前后端交互

AJAX 1. AJAX1.1 AJAX 简介1.2 AJAX 优缺点1.3 AJAX 前后端准备1.4 AJAX 请求基本操作1.5 AJAX 发送 POST 请求1.6 设置请求头1.7 响应 JSON 数据1.8 AJAX 请求超时与网络异常处理1.9 取消请求1.10 Fetch 发送 Ajax 请求 2. jQuery-Ajax2.1 jQuery 发送 Ajax 请求&#xff08;G…

❤React-React 组件通讯

❤ React 组件通讯 组件通讯将教我们的内容&#xff1a; 能够使用道具接收数据W能够实现父子组件之间的通讯能够实现兄弟组件之间的通讯能够给组件添加道具校验能够说出生命周期常用的钩子函数能够知道高阶组件的作用 1、 组件通讯介绍 组件是独立且封闭的单元&#xff0c;…

【初阶数据结构与算法】链表刷题之移除链表元素、反转链表、找中间节点、合并有序链表、链表的回文结构

文章目录 一、移除链表元素思路一思路二 二、合并两个有序链表思路&#xff1a;优化&#xff1a; 三、反转链表思路一思路二 四、链表的中间节点思路一思路二 五、综合应用之链表的回文结构思路一&#xff1a;思路二&#xff1a; 一、移除链表元素 题目链接&#xff1a;https:…

POI实现根据PPTX模板渲染PPT

目录 1、前言 2、了解pptx文件结构 3、POI组件 3.1、引入依赖 3.2、常见的类 3.3、实现原理 3.4、关键代码片段 3.4.1、获取ppt实例 3.4.2、获取每页幻灯片 3.4.3、循环遍历幻灯片处理 3.4.3.1、文本 3.4.3.2、饼图 3.4.3.3、柱状图 3.4.3.4、表格 3.4.3.5、本地…

计算机毕业设计Python+Neo4j知识图谱医疗问答系统 大模型 机器学习 深度学习 人工智能 大数据毕业设计 Python爬虫 Python毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

【机器学习】机器学习中用到的高等数学知识-2.概率论与统计 (Probability and Statistics)

概率分布&#xff1a;理解数据的分布特征&#xff08;如正态分布、伯努利分布、均匀分布等&#xff09;。期望和方差&#xff1a;描述随机变量的中心位置和离散程度。贝叶斯定理&#xff1a;用于推断和分类中的后验概率计算。假设检验&#xff1a;评估模型的性能和数据显著性。…

Scala入门基础(17.1)Set集习题

一.选择题 二.实训 图书馆书籍管理系统相关的练习。内容要求&#xff1a; 1.创建一个可变 Set&#xff0c;用于存储图书馆中的书籍信息 &#xff08;假设书籍信息用字符串表示&#xff0c;如“Java编程思想”“Scala实战”等&#xff09; 2.添加两本新的书籍到图书馆集合中&a…

移动端【01】面试系统的MVVM重构实践

基于MVVM的移动端面试系统重构实践&#xff1a;模块化设计与实现 一、项目背景 面试记录表系统在经过一年多的迭代后&#xff0c;代码质量问题日益突出。View和ViewModel代码均超过3000行&#xff0c;组件引用超过1000个&#xff0c;亟需进行架构重构。本文将详细介绍基于MVV…

Springboot 启动端口占用如何解决

Springboot 启动端口占用如何解决 1、报错信息如下 *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 9010 was already in use.Action:Identify and stop the process thats listening o…

基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统

项目名称&#xff1a;基于PythonDjangoVue3MySQL实现的前后端分离商场车辆管理系统 技术栈 开发工具&#xff1a;PyCharm、Visual Studio Code (VSCode)运行环境&#xff1a;Python 3.10、MySQL 8.0、Node.js 18技术框架&#xff1a;Django 5、Vue 3.4、Ant-Design-Vue 4.12 …

ML 系列: 第 23 节 — 离散概率分布 (多项式分布)

目录 一、说明 二、多项式分布公式 2.1 多项式分布的解释 2.2 示例 2.3 特殊情况&#xff1a;二项分布 2.4 期望值 &#xff08;Mean&#xff09; 2.5 方差 三、总结 3.1 python示例 一、说明 伯努利分布对这样一种情况进行建模&#xff1a;随机变量可以采用两个可能的值&#…

Openstack7--安装消息队列服务RabbitMQ

只需要在控制节点安装 安装RabbitMQ yum -y install rabbitmq-server 启动RabbitMQ并设置开机自启 systemctl start rabbitmq-server;systemctl enable rabbitmq-server 创建 rabbitmq 用户 并设置密码为 000000 rabbitmqctl add_user rabbitmq 000000 如果你不慎创错了…

图像处理实验二(Image Understanding and Basic Processing)

图像理解&#xff08;Image Understanding&#xff09;和基本图像处理&#xff08;Basic Image Processing&#xff09;是计算机视觉领域的重要组成部分。它们涉及从图像中提取有用信息、分析图像内容、并对其进行处理以达到特定目的。图像理解通常包括识别、分类和解释图像中的…

第74期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…

Kafka - 启用安全通信和认证机制_SSL + SASL

文章目录 官方资料概述制作kakfa证书1.1 openssl 生成CA1.2 生成server端秘钥对以及证书仓库1.3 CA 签名证书1.4 服务端秘钥库导入签名证书以及CA根证书1.5 生成服务端信任库并导入CA根数据1.6 生成客户端信任库并导入CA根证书 2 配置zookeeper SASL认证2.1 编写zk_server_jass…

除了 Postman,还有什么好用的 API 调试工具吗

尽管 Postman 拥有团队协作等实用特性&#xff0c;其免费版提供的功能相对有限&#xff0c;而付费版的定价可能对小团队或个人开发者而言显得偏高。此外&#xff0c;Postman 的访问速度有时较慢&#xff0c;这可能严重影响使用体验。 鉴于这些限制&#xff0c;Apifox 成为了一…

matlab建模入门指导

本文以水池中鸡蛋温度随时间的变化为切入点&#xff0c;对其进行数学建模并进行MATLAB求解&#xff0c;以更为通俗地进行数学建模问题入门指导。 一、问题简述 一个煮熟的鸡蛋有98摄氏度&#xff0c;将它放在18摄氏度的水池中&#xff0c;五分钟后鸡蛋的温度为38摄氏度&#x…