JSON

用于数据载体，在网络中进行数据传输

JSON基础语法

var 变量名={
    "key":value,
    "num":23,
    "str":"",
    "flag":true,
    "array":[],
    "obj":{}
}

获取数据：

变量名.key

JSON数据和java对象转换

使用Fastjson实现Java对象和JSON字符串的相互转换

导入坐标：

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

java对象转JSON

String jsonStr=JSON.toJSONString(obj);

JSON字符串对象转java对象

User user=JSON.parseObject(jsonStr,User.class);

利用json和axios来新增用户

html部分

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
   <table>
       <tr><td>用户名</td><td><input id="username" name="username" /><span id="dulp" style="color: red;display: none">用户名已存在</span></td></tr>
       <tr><td>密码</td><td><input id="pwd" name="pwd" type="password" /> </td></tr>
   </table>
    <!--这里要实现异步请求，如果是submit为同步请求-->
    <input type="button" id="btn" value="提交">
</form>


<script src="js/axios.js"></script>
<script>
    document.getElementById("username").onblur=function(){
        var value=this.value;
        axios.get("http://localhost:8088/judgeServlet?username="+value).then(function (resp) {
            if(resp.data){
                document.getElementById("dulp").style.display=''
                document.getElementById("btn").style.display="none"
            }else {
                document.getElementById("dulp").style.display="none"
                document.getElementById("btn").style.display=""
            }
        })
    }
    document.getElementById("btn").onclick=function() {
        //创建json对象
        var formData={
            username:"",
            userPwd:""
        };
        // 将表单数据给json对象
        formData.username=document.getElementById("username").value;
        formData.userPwd=document.getElementById("pwd").value;
        axios.post("http://localhost:8088/axiosAddServlet",formData).then(function (resp) {
            if(resp.data=="success"){
                location.href="http://localhost:8088/selectAllServlet";
            }
        })
    }
</script>
</body>
</html>

对于单选框，我们需要获取全部的选择，得到哪个框被选中，如果选中，再去给值

servlet部分：

@WebServlet(urlPatterns = "/axiosAddServlet")
public class AxiosAddServlet extends HttpServlet {
    private UserService userService = new UserService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        //因为注册提交方式为post，想得到参数需要获取请求体：
        BufferedReader reader = request.getReader();
        String s = reader.readLine();
        System.out.println(s);
        UserInfo userInfo = JSON.parseObject(s, UserInfo.class);
        userService.add(userInfo);
        response.getWriter().write("success");
    }
}