отправить команду серверу после щелчка на флажке

Я разрабатываю приложение, в котором у меня есть страница jsp с динамически сгенерированной таблицей (которая создается с помощью jstl), где каждая ячейка имеет один флажок. Когда я помещаю этот флажок, мне нужно, чтобы в базу данных вносилось событие, чтобы вставить строку в таблицу. Если я сниму флажок, эта строка должна быть удалена. Кто-нибудь знает, как это сделать? Мои мысли об этом - то, что я должен использовать для этого какой-то ajax-код, но я не знаю, к чему начать. Кто-то может дать мне некоторые идеи об этом (даже не нужен код, вроде бы, алгоритм должен быть достаточным, я думаю).отправить команду серверу после щелчка на флажке

Я следую предложение от г-Матей Кренко, и написать код последующей:

<%@ 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).

источник

2014-02-20 Kleber Mota

Я думаю, что вы смотрите на AJAX. Когда кнопка отмечена или отменена, вы можете вызвать метод ajax, который будет обновлять базу данных. – Peshal

Хорошо, я решить эту проблему, изменив яваскрипт кода, используемый для отправил запрос на сервер. Я следую инструкциям от 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); 
     } 
    } 
}

источник

2014-02-22 14:45:19

Это:

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

и это:

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

поможет вам.

источник

2014-02-20 02:17:08

. Я добавляю часть этого кода в свой код (все делается небольшими шагами), но ничего не происходит. первая часть, которую я тестирую в данный момент, - это щелчок по флажку, и после того, как я намереваюсь добавить вызовы ajax (см. код ниже). –

Смотрите мой комментарий ниже. Вам нужно заархивировать «.checkbox» в моем примере или добавить флажок «checkbox» для всех ваших флажков. См. Это: https://learn.jquery.com/using-jquery-core/selecting-elements/ И для достижения своей цели вам необходимо обрабатывать запрос ajax также в бэкэнд-части приложения. Но я не программист jsp, поэтому предоставил вам частичное решение. Но очень похоже на обработку обычных запросов –

Я думаю, что Ajax - это возможное решение. Вы можете использовать jQuery, чтобы сделать это проще.

Вы можете обратиться here

источник

2014-02-20 02:17:36

отправить команду серверу после щелчка на флажке

ответ

Смежные вопросы