javaweb拓展：json：ajax

基于JQuery的AJAX：

$.ajax({。。。。。}）
复制代码
 $(function () {
            //屏蔽表单自身的submit提交
            $("#btnajax").on("click", function (ev) {
                //获取表单的信息：
                console.log("启动jquery")
                //发送ajax请求，参数就是js对象$.ajax({   })
                $.ajax({
                    type: "POST",
                    url: "${pageContext.request.contextPath}/myLogin",
                    //将对象转成URL参数的过程就是序列化。。name=ming&age=21这种
                    data: {
                        name:  $("#inputEmail3").val(),
                        email:  $("#inputPassword3").val()
                    },
                    dataType: "json", //预期服务器返回数据的类型
                    success: function (data) {
                        console.log(data)
                        if (data.code!=200) {
                            $("#msgajax").html(data.msg);
                            $("#msgajax").css("color","red");


                        } else {
                            //成功，就跳转页面
                            location.href="${pageContext.request.contextPath}/index.jsp"
                            // $("#msgajax").html("出现错误：" + data);
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误：" + jqXHR.status + JSON.stringify(jqXHR));
                    }
                })
                ev.preventDefault();//阻止默认的submit提交表单
                /*var user = {
                    name: '郭童',
                    age: 23,
                    YY: 'huashsddf'
                };
                //jQuery.get(url, [data], [callback], [type])*/
复制代码

 

复制代码
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<!DOCTYPE html>--%>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户信息管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script>
        $(function () {
            //屏蔽表单自身的submit提交
            $("#btnajax").on("click", function (ev) {
                //获取表单的信息：
                console.log("启动jquery")
                //发送ajax请求，参数就是js对象$.ajax({   })
                $.ajax({
                    type: "POST",
                    url: "${pageContext.request.contextPath}/myLogin",
                    //将对象转成URL参数的过程就是序列化。。name=ming&age=21这种
                    data: {
                        name:  $("#inputEmail3").val(),
                        email:  $("#inputPassword3").val()
                    },
                    dataType: "json", //预期服务器返回数据的类型
                    success: function (data) {
                        console.log(data)
                        if (data.code!=200) {
                            $("#msgajax").html(data.msg);
                            $("#msgajax").css("color","red");


                        } else {
                            //成功，就跳转页面
                            location.href="${pageContext.request.contextPath}/index.jsp"
                            // $("#msgajax").html("出现错误：" + data);
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误：" + jqXHR.status + JSON.stringify(jqXHR));
                    }
                })
                ev.preventDefault();//阻止默认的submit提交表单
                /*var user = {
                    name: '郭送杜少府之任蜀州童',
                    age: 23,
                    YY: 'huashsddf'
                };
                //jQuery.get(url, [data], [callback], [type])*/

            })
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <form class="form-horizontal">
                <h2 style="text-align: center;margin-top: 50px" id="msgajax">用户登录界面</h2>
                <div class="form-group">
                    <input type="email" class="form-control" name="name" id="inputEmail3" placeholder="用户名或电子邮件">
                    <i class="fa fa-user"></i>
                </div>
                <div class="form-group help">
                    <input type="password" class="form-control" name="email" id="inputPassword3" placeholder="密　码">
                    <i class="fa fa-lock"></i>
                    <a href="#" class="fa fa-question-circle"></a>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default" id="btnajax">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>
复制代码

JSON：

复制代码
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/18
  Time: 14:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSON格式</title>
</head>
<body>
<label>什么是json</label>
<p>
    JSON :服务器和浏览器进行数据传输的一种格式（规约）
    <br>
    JSON:本质是字符串，

</p>
<script>
    //JS对象转JSON格式
    var  myUser = {
        name:"gt",
        age:23
    }
    //JSON格式字符串
    var  myJSON =' {"name":"gt", "age":23}';
    //将JS对象转化为JSON对象：
    //JSON对象是前端接收到服务器发过来的JSON格式的字符串后，自动封装转成JSON对象。。。和JS对象一样使用
  //JSON对象
    var  myUserJSON = {
        "name":"gt",
        "age":23
    }

    //重点：将JSON字符串转成JS对象||JSON对象
    var jsonObj = JSON.parse(myJSON);//JSON对象

    var jsonStr = JSON.stringify(myUser);//JS对象转JSON字符串


    //集合--->转JSON字符串集合
    var userList = [
        {
            name:"gt",
            age:23
        },
        {
            name:"lisi",
            age:21
        }
    ]
    var ListjSonStr = JSON.stringify(userList);

</script>
</body>
</html>
复制代码

Java端处理JSON：第三方库Jackson

 

 

复制代码
                 //使用个Jackson第三方技术处理JSON字符串
                //创建一个json转换器
                ObjectMapper objectMapper = new ObjectMapper();
                //通过writeValueAsString方法转化（对象||集合）为json格式
                //默认时间会被转化为时间戳,。@JsonFormat设置时间格式 pattern = yyyy-MM-dd
                String JSONMy = objectMapper.writeValueAsString(user);
                //打印查看
                System.out.println(JSONMy);
                //如何将json字符串转化为javabean：
                User JsonToUser = objectMapper.readValue(JSONMy,User.class);
                //转化为流输出
                resp.setContentType("application/json;charset=utf-8");
                objectMapper.writeValue(resp.getWriter(),JsonToUser);

                //jackson:注解 @JsonIgnore  忽略不会传递它。。。。@JsonFormat
复制代码

结果集封装：统一返回格式

复制代码
public class ResultEntity {

    private int code;
    private  Object obj;
    private  String msg;

    @Override
    public String toString() {
        return "ResultEntity{" +
                "code=" + code +
                ", obj=" + obj +
                ", msg='" + msg + '\'' +
                '}';
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public Object getObj() {
        return obj;
    }

    public void setObj(Object obj) {
        this.obj = obj;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}
复制代码

在servlet里面的运用：

注意：resp.setContentType("application/json;charset=utf-8");
复制代码
 HttpSession session = req.getSession();
        Object userName = session.getAttribute("UserName");
        System.out.println("session--Nmae:"+userName);
        resp.setContentType("application/json;charset=utf-8");
        //创建一个json转换器
        ObjectMapper objectMapper = new ObjectMapper();
        if (userName != null) {
            ResultEntity resultEntity = new ResultEntity();
            resultEntity.setCode(200);
            resultEntity.setMsg("成功");
            resultEntity.setObj(userName);
            System.out.println(resultEntity);

            objectMapper.writeValue(resp.getWriter(), resultEntity);
        } else {
            ResultEntity resultEntity = new ResultEntity();
            resultEntity.setCode(400);
            resultEntity.setMsg("失败");
            resultEntity.setObj("用户没有");
            System.out.println(resultEntity);

            objectMapper.writeValue(resp.getWriter(), resultEntity);
        }
复制代码

好了jsp：AJAX发送请求并回调数据取数据：

复制代码
<script>
        $(function () {
            $("#mybtn").on("click", function (ev) {
                //获取表单的信息：
                console.log("启动jquery")
                //发送ajax请求，参数就是js对象$.ajax({   })
                $.ajax({
                    type: "POST",
                    url: "${pageContext.request.contextPath}/ajax",
                    //将对象转成URL参数的过程就是序列化。。name=ming&age=21这种
                    dataType: "json", //预期服务器返回数据的类型
                    success: function (data) {
                        console.log(data)
                        if (data.code != 200) {
                            $("#mssgese").html(data.msg + data.obj);
                            $("#mssgese").css("color", "red");


                        } else {
                            //成功，就跳转页面
                            $("#mssgese").html(data.obj.name);
                            // $("#msgajax").html("出现错误：" + data);
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误：" + jqXHR.status + JSON.stringify(jqXHR));
                    }
                });
            })
        })

    </script>
复制代码

 

posted on   白嫖老郭  阅读(126)  评论(0)  编辑  收藏  举报

编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae