Java-JS向Servlet传递数组，执行完后JS再接收刷新界面

目录

业务实现效果：

一、JS向Servlet传递数组

结合项目需求展示代码：

Body模块：

Script模块：

二、Servlet更新结束后，向前端传递数据

---

业务实现效果：

因为勾选，选中的是一条数据，需要将一条数据放到一个数组中传递到Servlet，获得后再进行对数据库的操作，执行删除。

Selrvlet执行完后，需要将JS显示的数据进行更新，界面中选中的数据要进行删除消失，下方的商品和共计价格都要更新

具体如何传值到Servlet，在返回JS往下看。

一、JS向Servlet传递数组

逻辑顺序：

1.删除click时间，function定义一个集合，根据选择的商品id循环遍历提交它的列表数据。

        2.ajax：有固定格式，其中traditional着重介绍下，其它的一看就能懂。想要数列化数据，就设置为true，也就是传递的为数据，它的属性就必须设置为true！

3.JS接收返回的数据，得到了刷新，如何JS没有做好接收，界面是不会发生变化的，你会发现数据库已经执行完成，界面没有任何变化，如何接收呢？

3.1在ajax固定格式中的success中接收传过来的data，商品\共计用$("").text(data.)接收

3.2列表如果是删除就要先全部销毁，得到的数据在一行行拼接起来把它"画"出来，给tbody定义一个Id。

3.3再回到ajax中的success中$（“tbdoy的id”）.html("")，因为是删除所以.html("")，拼接完成后，在$（“tbdoyid”）.html(tobady)将它画出来，这样界面就会得到更新了.

结合项目需求展示代码：

说逻辑是不是蒙了，接下来按照上面讲的逻辑顺序把代码一一展示出来，对照代码看解释

Body模块：

	<input type="button" id="delete_btn" value="删除商品" onclick="removeBoughtCommodity()">
	
	<thead>
	        <tr>
	            <th>勾选商品</th>
	            <th>商品条码</th>
	            <th>商品名称</th>
	            <th>会员价</th>
	            <th>零售价</th>
	            <th>数量</th>
	            <th>金额</th>
	        </tr>
	 </thead>
	 <tbody id="tablecontent">
	        <c:forEach items="<%=orderItemList%>" var="item">
	            <tr>
	                <td align="center"<input onClick="ChkSonClick(this);" type="checkbox" name="checkboxes" id=${item.id}></td>
	                <td align="center">${item.commodityId}</td>
	                <td align="center">${item.commodityName}</td>
	                <td align="center">${item.price}</td>
	                <td align="center">${item.price}</td>
	                <td align="center">${item.count}</td>
	                <td align="center">${item.total}</td>
	            </tr>
	        </c:forEach>
  </tbody>

这就是给tbody定义id的地方 id="tablecontent"，和列表头一一对应，定义它的id就是在接收到data数据的时候用.html销毁或画。

 

Script模块：

	function removeBoughtCommodity() {
	            var checkboxes = document.getElementsByName("checkboxes");
	            var shoppingNum = $("#shopping_num_txt").val();
	            // 定义一个集合，收纳选中的内容
	            var ids=[];
	            for(var i=0;i<checkboxes.length;i++) {
	                if (checkboxes[i].checked) {
	                    ids.push(checkboxes[i].id);
	                }
	            }
	            $.ajax({
	                traditional:true,
	                type:"post",
	                url:"/supermarket/removeBoughtCommodity",
	                dataType: "json",
	                data:{ids:ids,"shoppingNum":shoppingNum},
	                success:function (data) {
	                    // 清空的方法
	                    $("#tablecontent").html("");
	                    var tbody = $("#tablecontent").html();
	                    for (var i = 0; i < data.length; i++) {
	                        tbody=tbody + "<tr><td align='center'><input onClick='ChkSonClick(this);' type='checkbox' name='checkboxes' id='" + data[i].id + "'></td>";
	                        tbody=tbody + "<td align='center'>" + data[i].commodityId + "</td>";
	                        tbody=tbody + "<td align='center'>" + data[i].commodityName + "</td>";
	                        tbody=tbody + "<td align='center'>" + data[i].price + "</td>";
	                        tbody=tbody + "<td align='center'>" + data[i].price + "</td>";
	                        tbody=tbody + "<td align='center'>" + data[i].count + "</td>";
	                        tbody=tbody + "<td align='center'>" + data[i].total + "</td></tr>";
	                    }
	                    // 重新画出更新后的表格
	                    $("#tablecontent").html(tbody);
	                }
	            });
	        };

此代码只是部分代码，想实现删除功能，结合自己数据库，在ajax中success中按库中传回来的数据拼接，具体如何接收关键代码已在介绍中说明，找寻下关键代码的位置和如何拼接

二、Servlet更新结束后，向前端传递数据

 private void removeBoughtCommodity(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String forwardPage = cashierPage;
        // 获得checkbox选择的数据ID
        String[] ids = req.getParameterValues("ids");
        // 将未结账的字段改为2 2：代表删除
        for(int a =0;a<ids.length;a++){
            supermarketService.removeBoughtCommodity(ids[a]);
        }
        // 根据流水号查询购物车表中未结账的数据-刷新一下界面
        String shoppingNumStr = req.getParameter("shoppingNum");
        List<OrderItemVO> orderChecked = supermarketService.getOrderChecked(shoppingNumStr);
        String data = JSON.toJSONString(orderChecked);
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.append(data);
    }

在pom文件中引入com.alibaba

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

这样就将后端的数据利用json串的形式data传回了前端界面，最后我们的界面就可以更新了！快来试试吧！