javascript 向servlet传递数组数据

最近在进行练习,碰到主要问题有两个:1.我想传递数组数据时怎么传递;2.明明用的是post,为什么老是跳转到doget().

然后在网上疯狂看各路大神秀骚操作。后面懂了之后,自己写了一篇,以此自励。

下面代码为用javascript使用form传递数据,已亲测。servlet代码就不填了。

<html>

<head>
    <meta charset="UTF-8">
    <title>page a</title>
    <script type = "text/javascript">
            var ar = new Array("a","b","c");
            function submitArray(){
                var form1 = document.createElement("form");
                form1.id = "form1";
                form1.name = "form1";
                document.body.appendChild(form1);
                var input = document.createElement("input");
                input.name = "arr";
                input.type = "text";
                input.value = ar.length;
                form1.appendChild(input);
                //下面为提交数组数据 
                for(var i = 0;i<ar.length;i++){
                    var input = document.createElement("input");
                    alert(ar);
                    input.name = "arr"+i;   //为了与其他name区分,个人习惯一物一名字
                    input.type = "text";
                    input.value = ar[i];
                    form1.appendChild(input);
                }
                form1.method = "post";
                form1.action = "servlet/requestservlet";   //此处可能会出现问题。当把div换成button时,此处填写为form1.action = "requestservlet";暂不清楚此处原因。
                form1.submit();
            }
    </script>
</head>
<body>
    <div style = "width:100px;height:100px;background-color:yellow;" onclick = "submitArray()">a</div>
</body>

</html>

关于第二个问题:个人觉得一定是form.method = "post"填写错误;在javascript 中一旦错误就不执行,故此跳转到doget();

当写了form但没有添加button或submit时,用document.getElementById("form的id").submit();

首先,在前端页面中,需要为复选框设置一个相同的 name 值,然后使用 JavaScript 获取选中的复选框的值,将其转换为数组并提交给后端 servlet。 HTML代码示例: ``` <form> <label><input type="checkbox" name="fruit" value="apple"> Apple</label> <label><input type="checkbox" name="fruit" value="banana"> Banana</label> <label><input type="checkbox" name="fruit" value="orange"> Orange</label> <button type="button" onclick="submitForm()">Submit</button> </form> ``` JavaScript代码示例: ``` function submitForm() { // 获取选中的复选框的值,转换为数组 var selectedFruits = Array.from(document.querySelectorAll('input[name="fruit"]:checked')).map(e => e.value); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方法和URL xhr.open('POST', '/servletName'); // 设置请求头 xhr.setRequestHeader('Content-Type', 'application/json'); // 发送请求 xhr.send(JSON.stringify(selectedFruits)); // 监听响应 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 获取响应数据 var responseData = xhr.responseText; // 将响应数据转换为数组并显示在页面上 var responseArray = JSON.parse(responseData); var output = responseArray.join(', '); document.querySelector('#output').textContent = output; } }; } ``` 在后端 servlet 中,使用 request.getParameterValues() 方法获取前端传递数组,并进行相应的操作,然后将处理后的数组转换为字符串并返回给前端页面。 Java代码示例: ``` protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取前端传递数组 String[] selectedFruits = request.getParameterValues("fruit"); // 进行相应的操作 // ... // 将处理后的数组转换为字符串并返回给前端页面 String responseString = Arrays.toString(selectedFruits); response.setContentType("application/json"); PrintWriter out = response.getWriter(); out.print(responseString); out.flush(); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值