前后端使用JSON格式数据进行交互

最新推荐文章于 2024-01-26 16:12:30 发布

二木成林

最新推荐文章于 2024-01-26 16:12:30 发布

阅读量3.4k

点赞数 1

分类专栏： # JSON 文章标签： JSON AJAX

本文链接：https://blog.youkuaiyun.com/cnds123321/article/details/102729268

版权

JSON 专栏收录该内容

1 篇文章

订阅专栏

效果展示

验证成功

验证失败

项目结构

源码

java

User.java

实体类，在里面用了lombok简化get、set方法的代码。

（如果不想使用lombok，可以自己手动添加set、get方法）

package com.mycom.myapp.jsondemo.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User implements Serializable {
    private int id;
    private String username;
    private String password;

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }
}

TestServlet.java

处理前台发到后端的数据，并将操作结果返回。

package com.mycom.myapp.jsondemo.servlet;

import com.google.gson.Gson;
import com.mycom.myapp.jsondemo.bean.User;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

public class TestServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        String data = readJSONData(request);
        Gson gson = new Gson();
        User user = gson.fromJson(data, User.class);
        if (user.getUsername().equals("admin") && user.getPassword().equals("admin")) {
            String str = "{\"message\":true}";
            System.out.println(str);
            writer.println(str);
        } else {
            String str = "{\"message\":false}";
            System.out.println(str);
            writer.println(str);
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    /**
     * 读取请求传递过来的JSON格式数据，返回JSON字符串
     *
     * @param request 请求
     * @return 返回JSON字符串
     */
    private String readJSONData(HttpServletRequest request) {
        StringBuffer json = new StringBuffer();
        String lineString = null;
        try {
            BufferedReader reader = request.getReader();
            while ((lineString = reader.readLine()) != null) {
                json.append(lineString);
            }
        } catch (Exception e) {
            System.out.println(e.toString());
        }
        return json.toString();
    }
}

web

web.xml

配置servlet文件。

<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <!--TestServlet-->
    <servlet>
        <servlet-name>TestServlet</servlet-name>
        <servlet-class>com.mycom.myapp.jsondemo.servlet.TestServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>TestServlet</servlet-name>
        <url-pattern>/testServlet</url-pattern>
    </servlet-mapping>
    <!--欢迎界面-->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>

index.html

主页，前端代码。

<html>
<head>
    <title>index</title>
    <meta charset="UTF-8"/>
</head>
<body>
<form action="" id="myForm" name="myForm">
    用户名：<input type="text" name="username" id="username"/><br>
    密码：<input type="password" name="password" id="password"><br>
    <button type="button" id="submitButton">提交</button>
</form>
<p>（验证正确的用户名：admin；密码：admin）</p>
<p style="color: red" id="redDemo"></p>
</body>
<script type="text/javascript">
    var submitButton = document.getElementById("submitButton");
    submitButton.onclick = submitData;

    function submitData() {
        var data = {
            username: document.getElementById("username").value,
            password: document.getElementById("password").value
        };
        // 定义XMLHttpRequest对象
        var XMLHttpReq;
        // 创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {
            // 其他浏览器
            XMLHttpReq = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            // IE浏览器
            XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 指定响应函数
        XMLHttpReq.onreadystatechange = function () {
            if (XMLHttpReq.readyState == 4) {
                // 信息已经成功返回，开始处理信息
                if (XMLHttpReq.status == 200) {
                    // 将从服务器端返回是JSON格式数据转换成JavaScript对象
                    var s = JSON.parse(XMLHttpReq.responseText);
                    // 对结果进行判断
                    if (s.message) {
                        document.getElementById("redDemo").innerText = "验证成功";
                    } else {
                        document.getElementById("redDemo").innerText = "验证失败";
                    }
                }
            }
        };
        XMLHttpReq.open("POST", "/testServlet", true);
        // 发送请求
        XMLHttpReq.send(JSON.stringify(data));
    }
</script>
</html>

pom.xml

需要使用到的加包依赖。

（如果没有使用maven管理加包，那么自己下载加包导入使用，需用到的包是：lombok和gson）。

    <!--lombok包-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.8</version>
      <scope>provided</scope>
    </dependency>
    <!--gson包-->
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.5</version>
    </dependency>

如果对完整源码感兴趣。

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

注意：在公众号后台回复【优快云201910241852】可获取本节源码。