JS原生代码把json数据异步提交到servlet

1.前端代码

<form action="addUserServlet" method="post" id="addForm">

        <div class="form-group">
            <label for="sno">学号：</label>
            <input type="text" class="form-control" id="sno" name="sno" placeholder="请输入学号">
        </div>

        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
        </div>

        <div class="form-group" style="text-align: center">
            <input class="btn btn-primary" type="submit" value="提交"/>
            <input class="btn btn-default" type="reset" value="重置"/>
            <input class="btn btn-default" type="button" value="返回"/>
        </div>
    </form>

2.JS原生代码实现ajax异步提交json数据

window.onload = function () {
            document.getElementById("addForm").onsubmit = function () {

                
                    var xmlhttp = new XMLHttpRequest();

                    let form = document.getElementById("addForm");
                    var tagElements=form.getElementsByClassName("form-control");//这里我把所有我要获取值得属性都使用了同一个类来标识；
                    var json={};
                    for (var j = 0; j < tagElements.length; j++){
                        var name=tagElements[j].name;//这里就是要获取得sno属性，将此sno属性作为json对象得key；
                        var value=tagElements[j].value;
                        json[name] = value; 	//注意这里必须要使用这种方式给json赋值。如果使用json.sno=value得话你会发现你所有的key都是一个字符串sno，而不是sno代表的值
                    }

                    var stringData = JSON.stringify(json);

                    xmlhttp.open("POST", "addUserServlet", true);
                    //xmlhttp.setRequestHeader("text/plain;charset=UTF-8");//默认方式（可以发送json格式字符串）
                    //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
                    xmlhttp.setRequestHeader("Content-type", "application/json;charset=UTF-8");//可以发送json格式字符串

                    //xmlhttp.send(data);//后台无法接收
                    //发送json数据，首先POST方式，再需要先格式化为json格式的字符串发送过去,后台才能接收到，
                    //并且需要后台通过request.getInputStream获取数据，无法通过getInparamter方法获取

                    xmlhttp.send(stringData);

                    xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            // document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                        }
                    }


                    //不用json方法提交数据到后台
                    /* let data = document.getElementById("addForm");
                     var formData = new FormData(data);

                     var xmlHttp = new XMLHttpRequest();
                     xmlHttp.onreadystatechange = function () {
                         if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                             alert(xmlHttp.responseText);
                         }
                     }
                     xmlHttp.open("post", "addUserServlet");
                     xmlHttp.send(formData);*/

            }

        }

3.Servlet接收json数据

@WebServlet("/addUserServlet")
public class AddUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //过滤
        request.setCharacterEncoding("utf-8");


        //测试是否在控制台显示
        /*String name = request.getParameter("name");
        System.out.println(name);

        String sno = request.getParameter("sno");
        System.out.println(sno);

        Map<String, String[]> map = request.getParameterMap();
        Set<String> keys = map.keySet();
        for (String key :keys ) {
            String[] value = map.get(key);
            System.out.println(Arrays.toString(value));
        }*/

        Map<String, String[]> map = request.getParameterMap();
        User user = new User();



        //将map中的数据封装到对象中
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }


        UserService service = new UserServiceImpl();
        service.addUser(user);
    }

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