单击HTML中的<button> / <input />会发生什么?

时间:2018-05-19 13:50:11

标签: java html sql

你知道,我脑子里有这个问题,这很简单。我有一种情况,我将servlet中的值传递给我事先准备好的参数。我的代码连接到SQL数据库,我有一个删除和编辑按钮。所以基本上,我会使用ID设置按钮的值(公司ID在我的情况下是准确的)。现在,如果单击任一按钮?我可以在if(button1!= null)中找到一个条件语句吗?或不?既然我有相同的价值?我必须有1个空按钮,以便代码可以知道该怎么做。我担心即使只点击了一个按钮,也会获取我设置的值。

&#13;
&#13;
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>View Database</title>
</head>
<body>
	<h1>View Database</h1>
	<hr>
	<br>
	<br>
	<hr>
	<br>
	<div style="padding-left: 200px">
	<table border = "1px" bordercolor = "black">
	<tr>
	<td>Company ID</td>
	<td>Name</td>
	<td>Contact</td>
	<td>Age</td>
	<td>Gender</td>
	<td>Email</td>
	<td>Position</td>
	<td colspan = "2"> Operations</td>
	</tr>
	<c:forEach items = "${modelList}" var = "list">
	<tr>
	<td>${list.cid}</td>
	<td>${list.name}</td>
	<td>${list.num}</td>
	<td>${list.age}</td>
	<td>${list.gender}</td>
	<td>${list.email}</td>
	<td>${list.position}</td>
	<td><form action = "updateEmployee" method = "post" ><button type="submit" name = "editButton" value = "${list.cid}">Update</button></form></td>
	<td><form action = "updateEmployee" method = "get" ><button type="submit" onclick="alert('Employee deleted!')" name = "delButton" value = "${list.cid}">Remove</button></form></td>
	</tr>
	</c:forEach>
	</table>
	</div>
	<br>
	<hr>
	<br>
	<br>
	<hr>
	<p align="right">
		<a href="http://localhost:8080/EmployeeWeb/myHome.jsp" target="_self"><small>Home</small>
		</a> | <a
			href="http://localhost:8080/EmployeeWeb/MyRegistrationPage.jsp"
			target="_self"><small>Register</small> </a> | <a
			href="http://localhost:8080/EmployeeWeb/MyUpdatePage.jsp"
			target="_self"><small>Update</small> </a> | <a
			href="http://localhost:8080/EmployeeWeb/MyDeletePage.jsp"
			target="_self"><small>Delete</small> </a> | <a
			href="http://localhost:8080/EmployeeWeb/MyAboutPage.jsp"
			target="_self"><small>About</small> </a>
	</p>

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

你可以在html

中有这样的东西
<form action="myapiURL" method="get">
<button name="ID" value="Company1ID" type="submit">Company 1</button>
<button name="ID" value="Company2ID" type="submit">Company 2</button>
<button name="ID" value="Company3ID" type="submit">Company 3</button>
<!-- ... -->
</form>

然后根据按下的按钮,请求的ID参数将被设置为该按钮值。这就是你需要的吗?

如果您想 NOT 让页面刷新,那么您可以使用AJAX并发送信息,并处理响应。例如,要删除:

&#13;
&#13;
<html>
<head>
<script>
function btnClick(btn) {
  if(confirm("Are you sure you want to delete: "+btn.innerText+"("+btn.id+")")) {
    // create a request to "up" (is up really the url you are going to send the request to?)
    var xhr= new XMLHttpRequest(), 
        method = "DELETE", 
        url = "up",
        data = new FormData();
    xhr.open(method, url, true);
    xhr.onreadystatechange = function () {
      // With the onreadystatechange we can handle the response
      if(xhr.readyState === 4){
        // we will just show an alert with contents to the response for the example.
        alert(xhr.responseText);
      }
    };
    // FormData.append(name, value) - appends a new value onto an 
    //  existing key inside a FormData object, or adds the key if 
    //  it does not already exist.
    data.append("companyId", btn.id);
    data.append("companyName", btn.companyname);
    // now send the data to "up"
    xhr.send(data);
  }
}
</script>
</head>
<body>
<button onclick="btnClick(this)" id="CompanyID1" companyname="ACME">Delete ACME</button>
<button onclick="btnClick(this)" id="CompanyID2" companyname="Sears">Delete Sears</button>
<button onclick="btnClick(this)" id="CompanyID3')" companyname="Evil Corp.">Delete Evil Corp.</button>
</body>
</html>
&#13;
&#13;
&#13;

当然这会尝试向stackoverflow.com/post/5046175/up发送一个不存在的请求,所以我们会得到一个空响应。但它会发送参数 companyId=<one pressed>companyName=<one pressed>,因为我在formdata中设置它们。