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

比眉伴天荒 2023-10-10 11:27 18阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 Servlet基础：提交数据到Java服务器

在Java中，Servlet是用于处理客户端请求的服务器端组件。当用户通过浏览器向服务器发送数据（如表单提交）时，这些数据会被解析并传递给对应的Servlet。以下是一个简

桃扇骨/ 2024年11月25日 09:48/ 0 赞/ 6 阅读

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

1.前端代码 <form action="addUserServlet" method="post" id="addForm"> <

比眉伴天荒/ 2023年10月10日 11:27/ 0 赞/ 19 阅读

相关原生js 同步&异步

同步、异步代码的同步异步，标签的同步异步代码的同步异步 1、代码的同步就是，从上往下顺序执行。 2、代码的异步就是，代码运行到此处，不等结果出来，就开

太过爱你忘了你带给我的痛/ 2023年07月04日 11:12/ 0 赞/ 20 阅读

相关如何把本地代码强制提交到远程代码仓库gitee

背景 git虽然简单，但不经常使用命令行，经常遇到各种场景不知道该怎么处理。今天主要针对把本地代码仓库提交到gitee的各种场景处理过程分享出来，供大家参考创建远程

冷不防/ 2023年01月18日 11:19/ 0 赞/ 719 阅读

相关 Servlet返回Json数据到前端

PrintWriter out = response.getWriter(); JSONObject json = new JSONObject(); Vector<T

忘是亡心i/ 2022年05月28日 14:09/ 0 赞/ 458 阅读

相关用JSON格式提交数据到服务端

准备Hero.java public class Hero { private String name; private int hp;

朴灿烈づ我的快乐病毒、/ 2022年05月28日 07:36/ 0 赞/ 200 阅读

相关 JQuery 提交json数据

提交代码 $.post( "${pageContext.request.contextPath}/EditServlet?method=creat

系统管理员/ 2022年05月19日 13:36/ 0 赞/ 352 阅读

相关 ajax提交xml到servlet

页面JS如下 function postXML()\{ if (window.XMLHttpRequest) req = new XMLHttpRequest();

布满荆棘的人生/ 2022年05月17日 11:59/ 0 赞/ 143 阅读

相关 Servlet输出JSON数据Servlet向浏览器返回JSON数据

Servlet输出JSON数据Servlet向浏览器返回JSON数据一、依赖jar包 1、 gson-2.8.5

冷不防/ 2022年05月16日 05:43/ 0 赞/ 217 阅读

相关把数据从angularjs传递到原生js中的解决方案

angularjs传递数据到原生js angularjs的MVC分层思想很类似java后端的MVC，应该也有很多人和我一样java出身写前端的时候喜欢用angularjs

小灰灰/ 2021年11月29日 16:42/ 0 赞/ 141 阅读