Question

我正在开发一个应用程序，其中我有一个jsp页面，其中包含一个动态生成的表（使用jstl生成），其中每个单元格都有一个复选框。当我选中此复选框时，我需要触发一个事件到数据库以在表中插入一行。如果我取消选中该复选框，则应删除此行。有人知道怎么做吗？我对此的想法是我应该使用一些ajax代码，但我不知道从哪里开始。有人可以给我一些关于这个的想法（甚至不需要代码，我想这种算法就足够了。）

我遵循Matej Chrenko先生的建议，并写下以下代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-1.11.0.min.js"> </script>
<script>
$(".checkbox").change(function() {
    if(this.checked) {
        window.alert("unmarked");
    } else{
        window.alert("marked");
    }
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cadastra Horario Livre</title>
</head>
<body>

<p align="center">
<span class="usuario">${nome}</span> | <strong> Hora Livre</strong> | <a href="/hora_livre/ProcessaSaida"> Sair</a>
</p>

<p align="center">

<form method="post" action="">
<table border = 2>

<tr>
    <th>  </th>
    <c:forEach var="item" items="${list2}">
        <th> <c:out value="${item}"/> </th>
    </c:forEach>
</tr>

<c:forEach var="item2" items="${list}">
<tr>
    <td> <c:out value="${item2}"/> </td>
    <c:forEach var="item" items="${list2}">
        <td> <input type="checkbox"> </td>
    </c:forEach>
</tr>
</c:forEach>

</table>
</form>

</p>

</body>
</html>

但是，当我点击复选框时，什么也没发生。我做错了什么？（我将jquery文件添加到我项目的WEB-INF文件夹中 - 这个jsp所在的位置。）

Answer 1

此：

 $(".checkbox").change(function() {
        if(this.checked) {
            //Do stuff
        } else{
            //unchecked
        }
    });

和此：

https://api.jquery.com/jQuery.ajax/

会帮助你。

Answer 2

我认为Ajax是可能的解决方案。您可以使用jQuery更轻松地完成它。

您可以参考here

Answer 3

好的，我通过将用于发送请求的javascript代码更改为服务器来解决问题。我按照this article的说明进行操作。

JSP页面的代码结束如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="<c:url value='/js/ajax.js'/>"></script>
<script>
function handleClick(cb, idevento, data, hora) {
    if(cb.checked) {
        alert("marked "+data+" "+hora+" for "+idevento);
        sendAjaxRequest("/hora_livre/CadastraHoraLivre?target=cadastra&data="+data+"&hora="+hora+"&evento="+idevento, "showdetails");
    } else{
        alert("unmarked "+data+" "+hora+" for "+idevento);
        sendAjaxRequest("/hora_livre/CadastraHoraLivre?target=remove&data="+data+"&hora="+hora+"&evento="+idevento, "showdetails");
    }
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cadastra Horario Livre</title>
</head>
<body>

<p align="center">
<span class="usuario">${nome}</span> | <strong> Hora Livre</strong> | <a href="/hora_livre/ProcessaSaida"> Sair</a>
</p>

<p align="center">

<table border = 2>

<tr>
    <th>  </th>
    <c:forEach var="item" items="${list2}">
        <th> <c:out value="${item}"/> </th>
    </c:forEach>
</tr>

<c:forEach var="item2" items="${list}">
<tr>
    <td> <c:out value="${item2}"/> </td>
    <c:forEach var="item" items="${list2}">
        <td> <input type="checkbox" id="checkbox" onclick="handleClick(this, '${id}', '${item2}', '${item}')"> </td>
    </c:forEach>
</tr>
</c:forEach>

</table>

<div id="showdetails"> </div>

</p>

</body>
</html>

页面中包含的文件ajax.js是：

/* common method to get XMLHttp request object */

function getXMLHttpRequest() {
    var req;
    if (window.XMLHttpRequest) { // For Firefox, Mozilla, Safari, …
        req = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // For IE
        try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                //
            }
        }
    }
    return req;
}

/* method for dynamically getting current time in milliseconds and append that value to no-cache parameter
* IE browser does not send ajax request if the url is same, simply get result from cache
* to avoid this and make a new request, we append no-cache param to each ajax request.
*/

function getNoCacheValue(url)
{
    var d = new Date();
    var appendstring = (url.indexOf("?") != -1) ? "&" : "?";
    var nocachevalue = appendstring + "no-cache=" + d.getTime();
    return nocachevalue
}

/* method to send a ajax request, and write the response text to given divid. */

function sendAjaxRequest(url, divid) {
    url = url + getNoCacheValue(url);
    var req = getXMLHttpRequest();
    req.onreadystatechange = function() {
        processResponse(req, divid)
    };
    req.open('GET', url, true);
    req.send(null);
}

function processResponse(req, divid) {
    if (req.readyState == 4) {
        if (req.status == 200) {
            document.getElementById(divid).innerHTML=req.responseText;
            invokeScript(document.getElementById(divid));
        }
    }
}

/* method for executing script separately.
* (scenario :  send a Ajax request, response is HTML with some scripts – scripts in response HTML should not load )
* to overcome this issue, we used this method to load the scripts separately.
*/

function invokeScript(divid) {
    var scriptObj = divid.getElementsByTagName("SCRIPT");
    var len = scriptObj.length;
    for(var i=0; i<len; i++) {
        var scriptText = scriptObj[i].text;
        var scriptFile = scriptObj[i].src
        var scriptTag = document.createElement("SCRIPT");
        if ((scriptFile != null) && (scriptFile != "")) {
            scriptTag.src = scriptFile;
        }
        scriptTag.text = scriptText;
        if (!document.getElementsByTagName("HEAD")[0]) {
            document.createElement("HEAD").appendChild(scriptTag)
        }
        else {
            document.getElementsByTagName("HEAD")[0].appendChild(scriptTag);
        }
    }
}

单击复选框后，将命令发送到服务器

3 个答案: