基于复选框选择(AJAX)删除JSP中的多行数据

时间:2017-04-17 08:47:06

标签: javascript java ajax jsp servlets

我正在制定如下要求。

我正在存储一个对象列表(每个对象都有一个唯一的id)作为会话参数,并使用JSTL在jsp中的表中显示每个对象数据,如下所示

<c:forEach var="list" items="${PlayerList}">

<tr>
        <td>
<img  style="cursor:pointer" src="./images/delete.jpg" title="Force Delete" 
onClick="forceDelete(${list.playerId})">
        <td>${list.playerName}</td>
        <td>${list.runsScored}</td>
    </tr>
</c:forEach>

AJAX功能

   <script>
function forceDelete(playerIdValue)
        {
            var xmlhttp;
            var toDelete= confirm("Do you want to Remove?")
            if (window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {

document.getElementById('display_div').innerHTML=xmlhttp.responseText;
                }
            }
            if (toDelete== true)
            {
                xmlhttp.open("POST","PlayerController?
 value="+playerIdValue,true);
                xmlhttp.send();

            }
        }
   </script>

我正在处理PlayerController servlet的POST方法中的删除行

现在我想实现类似下面的内容

<c:forEach var="list" items="${PlayerList}">

<tr>
        <td><input type="checkbox">
        <td>${list.playerName}</td>
        <td>${list.runsScored}</td>
    </tr>
</c:forEach>
<input type="button" value="delete">

用户可以选择多个复选框并点击删除按钮,然后使用AJAX从JSP中删除相应的行

我应该如何处理,任何帮助都将不胜感激。

如果需要任何其他数据,我准备提供。

提前致谢。

我试过这个,但似乎没有用,告诉我我在哪里做错了。

复选框代码`

<input type="checkbox" name="toBeDeleted[]" value="${list.playerId}">
<div align="center"><button onclick="forceStop()">Delete</button></div>

JS代码

function forceStop()
        {
            var toBeDeleted = new Array();
            $("input:checked").each(function() {
            data['toBeDeleted[]'].push($(this).val());
            });

            $.ajax({
             url:"PlayerController",
             type:"POST",
             dataType:'json',
             data: {toBeDeleted:toBeDeleted},
             success:function(data){
            },
            });

`

2 个答案:

答案 0 :(得分:0)

在没有确切代码详细信息的情况下需要遵循的方法:

  1. 为复选框提供名称和值属性,其值为播放器的ID
  2. 点击删除获取所有复选框的列表,这将获得一系列值,即玩家ID数组
  3. 这个数组需要通过ajax请求传递给你的servlet,servlet检索列表并删除所有记录。
  4. 如有任何疑虑,也会发布伪代码。

答案 1 :(得分:0)

这就是我所做的,而且它的工作非常好

在JSP中,JS函数内部

function forceStop()
        {

            var checkboxes = document.getElementsByName('toBeDeleted');
            var selected = new Array();
            for (var i=0; i<checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    selected.push(checkboxes[i].value);
                }
            }

                $.ajax({
                    url:"PlayerController",
                    type:"POST",
                    dataType:'json',
                    data: {toDelete:selected},
                    success:function(data){
                      alert("SUCCESS");
                    },
                });

        }

在servlet内部,我检索了如下数组。

String[] toDelete = request.getParameterValues("toDelete[]");
    int[] toBeDeleted=new int[toDelete.length];
    for(int i=0;i<toDelete.length;i++)
    {
        toBeDeleted[i]=Integer.parseInt(toDelete[i]);
    }

我们需要将每个元素解析为整数,因为它们将被AJAX解析为字符串。

来自控制器我使用DAO进行批量删除。