java - 当您单击 HTML 中的 <button>/<input> 时，到底会发生什么？-6ren

java - 当您单击 HTML 中的

转载作者：行者123 更新时间：2023-12-02 02:08:11

25

4

你看，我脑子里有这个问题，这很简单。我遇到过这样的情况:我将 servlet 中的值传递给我事先准备好的参数。我的代码已连接到 SQL 数据库，并且有一个删除和编辑按钮。所以基本上，我会使用 ID(在我的例子中准确地说是公司 ID)设置按钮的值。现在，如果单击其中一个按钮？我可以有一个条件语句 if(button1 != null) 吗？或不？因为我有相同的值(value)？我必须有 1 个空按钮，以便代码知道要做什么。我担心即使只单击一个按钮，我设置的值也会被获取。

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

最佳答案

你可以在 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请求的参数将设置为该按钮值。这是您所需要的吗？

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

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

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

关于java - 当您单击 HTML 中的 <button>/<input> 时，到底会发生什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50425993/

25

4

0

文章推荐： java - 从java文件中加载数据

文章推荐： Java - 逐字符读取文件并计算行数

文章推荐： java - XGBoost，从 CSR 格式的一行数据创建 DMatrix

javascript - 将文本从一个 INPUT 拖动到另一个 INPUT，而不从源 INPUT 中删除文本
我有两个文本输入元素 A 和 B。我希望用户能够从 A 中选择部分或全部文本并拖动到 B，但文本不会从 A 中消失。假设“A”包含“quick brown fox”，用户突出显示“fox”一词并将
JavaScript 无法将 input.min、input.max、input.value 识别为整数
我正在一个网站上工作，如果在提交表单之前数字不在最小值和最大值之间，我希望数字输入能够自行更正。我的代码如下: HTML: JavaScript: function CorrectOverUnder
php - Laravel 4:Input::has() + Input::get() vs. ($var = Input::get()) != null
在检查输入值是否存在并将其分配给变量时，我看到了两种实现此目的的方法: if(Input::has('id')) { $id = Input::get('id'); // do som
input - <input type ="submit"/> 和 <input type ="text"/> 之间的盒模型不一致
我意识到有一个 border-box盒子模型，而有一个 content-box盒子模型。此行为存在于 IE8 和 FF 中。不幸的是，这使我无法将这种样式应用于大小均匀的输入: input, tex
html - 在 Polymer 中，为什么要使用 `<input is="iron-input">` instead of ` `？
在 Polymer 文档 ( https://elements.polymer-project.org/elements/iron-input ) 中，我发现: 而在另一个官方文档(https://
PHP : multiple inputs into other multiple inputs
我使用 jquery 添加/删除输入我使用append为日期/收入添加多个Tr 我还使用另一个附加来添加多个 td 以获取同一日期 Tr 中的收入我添加多个日期输入，并在此表中添加多个收入输入我
python input() 在调用 input() 之前采用旧的标准输入
Python3 的 input() 似乎在两次调用 input() 之间采用旧的 std 输入。有没有办法忽略旧输入，只接受新输入(在 input() 被调用之后)？ import time a =
jquery - :input and input in Jquery 之间的区别
在一些教程中，我看到了这些选择器: $(':input'); 或 $('input'); 注意“:”。有什么不同吗？最佳答案 $('input') = 仅包含元素名称，仅选择 HTML 元素。 $
javascript - $(input).blur() & $(input).focusout
我有下一个 html 表单: Nombre: El nombre es obligatorio. Solo se pe
javascript - 为什么 `@input` 装饰器优先于 `inputs:[]`
有两种方法可以在组件上定义输入: @Component({ inputs: ['displayEntriesCount'], ... }) export class MyTable i
input: dynamic input is missing dimensions in profile
input: dynamic input is missing dimensions in profile onnx2trt代码报错： import numpy as np import tensor
python - 如何在 "two-input input"中允许单个输入？
所以，我有允许两个输入的代码: a, b = input("Enter a command: ").split() if(a == 'hello'): print("Hi") elif(a =
python - 如何在 input() 进行时访问 input() 函数
我有一个与用户交流的程序。我正在使用 input() 从用户那里获取数据，但是，我想告诉用户，例如，如果用户输入脏话，我想打印 You are swearing!立即删除它! 而用户正在输入。如您
Java input = ""与 input = null 不同吗？
我在运行 J2ME 应用程序时遇到了一些严重的内存问题。所以我建立了另一个步骤来清除巨大的输入字符串并处理它的数据并清除它。但直到我设置 input = null 而不是 input = "" 才解
安卓模拟器 : both soft input and hard keyboard input
我想在我的 android 虚拟设备中同时启用软输入和硬键盘。我知道如何两者兼得，但不会两者。同时想要BOTH的原因: 软输入:预览当键盘缩小屏幕时布局如何调整大小硬键盘:显然是快速输入。提前致
javascript - addClass "input-invalid"to input 在我点击输入元素外部之前不会显示
我有一个邮政编码字段，在 keyup 上我执行了一个 ajax 调用。如果没有可用的邮政编码，那么我想添加类“input-invalid”。但问题是，在我单击输入字段的外部某处之前，红色边框验证不会
Angular4 @Input() 与 Component.inputs 数组
根据我的理解使用 @Input() name: string; 并在组件装饰器中使用输入数组，如下所示 @Component({ ... inputs:
typescript - 如何将语法 "inputs"属性更改为 "@Input"属性装饰器
我有一段代码是这样的 @Component({ selector: 'control-messages', inputs: ['controlName: control'],
input - Angular 2 : What are @input and @output properties
在@component中， @input 和@output 属性代表什么以及它们的用途是什么？什么是指令，为什么我们必须把指令放在下面的结构中？ directives:[CORE_DIRECTIVE
input - 避免SAS错误消息: "NOTE: Invalid argument to function INPUT"
有没有一种方法可以测试变量是否会使SAS中的INPUT转换过程失败？或者，是否可以避免生成的“NOTE:无效参数”消息？ data _null_; format test2 date9.; inp

首页

博学

6Ren·AI

商城