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

目录

业务实现效果：

因为勾选，选中的是一条数据，需要将一条数据放到一个数组中传递到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模块：

勾选商品商品条码商品名称会员价零售价数量金额

" var="item">

${item.commodityId}${item.commodityName}${item.price}${item.price}${item.count}${item.total}

这就是给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

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 

tbody=tbody + "

";

tbody=tbody + "

" + data[i].commodityId + "";

tbody=tbody + "

" + data[i].commodityName + "";

tbody=tbody + "

" + data[i].price + "";

tbody=tbody + "

" + data[i].price + "";

tbody=tbody + "

" + data[i].count + "";

tbody=tbody + "

" + data[i].total + "";

}

// 重新画出更新后的表格

$("#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

supermarketService.removeBoughtCommodity(ids[a]);

}

// 根据流水号查询购物车表中未结账的数据-刷新一下界面

String shoppingNumStr = req.getParameter("shoppingNum");

List 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

com.alibaba

fastjson

1.2.61

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