简体   繁体   English

当您单击<button>/</button>时,实际发生了什么 <button><input></button> <button>在HTML中?</button>

[英]What really happens when you click the <button>/<input> in HTML?

You see, I have this question in my head and this is very simple. 你看,我脑子里有这个问题,这很简单。 I have a situation where I pass a value from my servlet to a parameter that I prepared beforehand. 我遇到的一种情况是,我将servlet中的值传递给预先准备的参数。 My code is connected to SQL database and I have a delete and edit button. 我的代码已连接到SQL数据库,并且具有删除和编辑按钮。 So basically, I would set the value of the buttons with the ID (Company ID to be exact in my case). 因此,基本上,我将使用ID(在我的情况下为准确的公司ID)设置按钮的值。 Now, if either of the button is clicked? 现在,是否单击任何一个按钮? Can I have a condional statement where if(button1 != null)? 我可以在if(button1!= null)的地方声明条件吗? or not? 或不? since i have the same value? 因为我有相同的价值? I have to have 1 null button so that the code can know what to do. 我必须有1个null按钮,以便代码可以知道该怎么做。 I am afraid that the values I have set up would be fetched even though only one button is clicked. 恐怕即使只单击一个按钮,也会获取我设置的值。

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

You could have something like this in html 你可以在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>

then depending on which button is pressed the ID param of the request would be set to that buttons value. 然后根据按下哪个按钮,将请求的ID参数设置为该按钮的值。 Is that what you need? 那是你需要的吗?

If you want to NOT have the page refresh, then you can use AJAX and send the information, and handle the response. 如果你想没有刷新页面,则可以使用AJAX和发送信息,并处理响应。 For example to do the delete: 例如进行删除:

 <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> 

Of course this will try to send a request to stackoverflow.com/post/5046175/up which does not exist so we will get an empty response from it. 当然,这将尝试将请求发送到不存在的stackoverflow.com/post/5046175/up,因此我们将得到一个空响应。 But it will send the parameters companyId=<one pressed> and companyName=<one pressed> because I set them in the formdata. 但是它将发送参数 companyId=<one pressed>companyName=<one pressed>因为我在formdata中设置了它们。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM