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",//默认是get
                async:"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",//请求路径servlet
                type:"get",
                success:function (res) {
                    $("h1").text(res);
                }
            })

        });
    });
</script>
</body>

    @Override
    protected 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",//请求路径servlet
                type:"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对象传出去

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       resp.setCharacterEncoding("utf-8");

        resp.setContentType("application/json");  // 设置返回类型为 JSON
        PrintWriter 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");  // 设置返回类型为 JSON

        PrintWriter 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");  // 设置返回类型为 JSON

        PrintWriter 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);
    }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【计算机网络】章节 知识点总结

一、计算机网络概述 1. 计算机网络向用户提供的两个最重要的功能&#xff1a;连通性、共享 2. 因特网发展的三个阶段&#xff1a; 第一阶段&#xff1a;从单个网络 ARPANET 向互联网发展的过程。1983 年 TCP/IP 协议成为 ARPANET 上的标准协议。第二阶段&#xff1a;建成三级…

Python+robotframework接口自动化测试实操(超详细总结)

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 目前我们需要考虑的是如何实现关键字驱动实现接口自动化输出&#xff0c;通过关键字的封装实现一定意义上的脚本与用例的脱离&#xff01; robot framework 的…

如何管理好自己的LabVIEW项目

在LabVIEW项目开发中&#xff0c;项目管理对于提高开发效率、确保项目质量、减少错误和维护成本至关重要。以下从项目规划、代码管理、测试与调试、版本控制、团队协作等方面&#xff0c;分享LabVIEW项目管理的体会。 ​ 1. 项目规划与需求分析 关键步骤&#xff1a; 需求分析…

【快速解决】kafka崩了,重启之后,想继续消费,怎么做?

目录 一、怎么寻找我们关心的主题在崩溃之前消费到了哪里&#xff1f; 1、一个问题&#xff1a; 2、查看消费者消费主题__consumer_offsets 3、一个重要前提&#xff1a;消费时要提交offset 二、指定 Offset 消费 假如遇到kafka崩了&#xff0c;你重启kafka之后&#xff0…

matlab建模入门指导

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

51单片机应用开发(进阶)---定时器应用(电子时钟)

实现目标 1、巩固定时器的配置流程&#xff1b; 2、掌握按键、数码管与定时器配合使用&#xff1b; 3、功能1&#xff1a;&#xff08;1&#xff09;简单显示时间。显示格式&#xff1a;88-88-88&#xff08;时-分-秒&#xff09; 4、功能2&#xff1a;&#xff08;1&#…

【外包】软件行业的原始形态,项目外包与独立开发者

【外包】互联网软件行业的原始形态&#xff0c;项目外包与独立开发者 本科期间写的一些东西&#xff0c;最近整理东西看到了&#xff0c;大致整理一下放出来&#xff0c;部分内容来自其他文章&#xff0c;均已引用。 文章目录 1、互联网软件行业的原始形态2、项目订单&#xff…

Python酷库之旅-第三方库Pandas(208)

目录 一、用法精讲 971、pandas.MultiIndex.set_levels方法 971-1、语法 971-2、参数 971-3、功能 971-4、返回值 971-5、说明 971-6、用法 971-6-1、数据准备 971-6-2、代码示例 971-6-3、结果输出 972、pandas.MultiIndex.from_arrays类方法 972-1、语法 972-2…

基于ConvNeXt的矿石种类识别

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

C++入门基础知识140—【关于C++ 类构造函数 析构函数】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 类构造函数 & 析构函数的相关内容…

【Linux】-学习笔记03

第十一章-管理Linux软件包和进程 1.源码下载安装软件 1.1概念 源码文件&#xff1a;程序编写者使用C或C等语言编写的原始代码文本文件 源码文件使用.tar.gz或.tar.bz2打包成压缩文件 1.2特点 源码包可移植性好&#xff0c;与待安装软件的工作环境依赖性不大 由于有编译过程…

鸿蒙HarmonyOS(ArkUI基础篇大合集!)

文章目录 ArkUI&#xff08;方舟UI框架&#xff09;1.简介2.基本概念3.概述4.布局1.概述2.通用布局属性&#x1f388;1.盒子属性2.背景属性3.定位属性4.通用属性&#x1f388; 3.线性布局4.弹性布局(Flex)5.层叠布局(Stack) 5.组件1.使用文本1.文本显示(Text/Span)2.文本输入 (…

Prompt 工程

Prompt 工程 1. Prompt 工程简介 “预训练-提示预测”范式是近年来自然语言处理&#xff08;NLP&#xff09;领域的一个重要趋势&#xff0c;它与传统的“预训练-微调-预测”范式相比&#xff0c;提供了一种更为灵活和高效的模型应用方式。 Prompt工程是指在预训练的大型语言…

十天入门javaScript第四天(Promises对象异步 )(睡眠函数) (json)

Promise 是一个 JavaScript 的内置对象&#xff0c;它代表了一个异步操作的最终完成&#xff08;或失败&#xff09;及其结果值。Promise 对象是异步编程的一种解决方案&#xff0c;它可以使异步操作以更简洁、更易于管理的方式进行。 Promise 对象有三个状态&#xff1a; Pen…

【C#设计模式(8)——过滤器模式(Adapter Pattern)】

前言 滤液器模式可以很方便地实现对一个列表中的元素进行过滤的功能&#xff0c;能方便地修改滤器的现实&#xff0c;符合开闭原则。 代码 //过滤接口public interface IFilter{List<RefuseSorting> Filter(List<RefuseSorting> refuseList);}//垃圾分类public cla…

开源共建 | 长安链开发常见问题及规避

长安链开源社区鼓励社区成员参与社区共建&#xff0c;参与形式包括不限于代码贡献、文章撰写、社区答疑等。腾讯云区块链王燕飞在参与长安链测试工作过程中&#xff0c;深入细致地总结了长安链实际开发应用中的常见问题及其有效的规避方法&#xff0c;相关内容多次解答社区成员…

华为云创建ECS前台展示规格类型选项是怎么做到的?

前台展示很多规格可选&#xff0c;怎么做到的&#xff1f;先了解规格其实都是管理员在后台service_OM创建好规格 1.规格 1.1设置自定义标签打通规格和主机组还能体验调度功能 引申&#xff1a;AZ可用分区&#xff08;为了做容灾&#xff09; 为什么在界面可以让我√az0.dc0,…

Linux网络——自定义协议与序列化

一、协议 协议是一种 " 约定 ". socket api 的接口 , 在读写数据时 , 都是按 " 字符串 " 的方式来发送接收的。如 果我们要传输一些 " 结构化的数据 "&#xff0c;依然可以通过协议。 其实&#xff0c;协议就是双方约定好的结构化的数据。…

《TCP/IP网络编程》学习笔记 | Chapter 6:基于UDP的服务器端/客户端

《TCP/IP网络编程》学习笔记 | Chapter 6&#xff1a;基于UDP的服务器端/客户端 《TCP/IP网络编程》学习笔记 | Chapter 6&#xff1a;基于UDP的服务器端/客户端理解UDPUDP套接字的特点UDP内部工作原理UDP的高效使用 实现基于UDP的服务器端/客户端UDP中的服务器端和客户端没有连…

Linux也有百度云喔~

一、写在前面 经常有粉丝向我抱怨&#xff0c;为什么每次发放资料都用百度云&#xff0c;自己下载了一遍之后还得再上传一遍服务器才能分析。其实大家大可不必这么周转&#xff0c;百度云也有Linux的发行版本&#xff0c;利用python包bypy来管理/传输百度云盘资源也很方便(别问…