HTML5标签页表单点击London标签触发意外服务器请求的问题排查求助

嘿Cornelis，我帮你找到了问题的根源，咱们一步步来解决：

问题原因 #

你所有的标签页按钮都包裹在<FORM>标签内部，而HTML里的<button>元素默认type是submit——也就是说，当你点击这些标签按钮时，浏览器会默认触发表单的提交动作，直接把表单数据发送到服务器，这就是为什么你一点London标签就会发请求的原因。

修复步骤 #

只需要给所有的标签页按钮加上type="button"属性，明确告诉浏览器这些按钮只是普通按钮，不会触发表单提交：

• 把每个tab按钮的代码从：

  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  

  修改为：

  <button type="button" class="tablinks" onclick="openCity(event, 'London')">London</button>
  

另外，顺便提一下你Tokyo标签里的提交按钮：现在用location.href跳转的方式，并没有把三个输入框的内容（comment1、comment2、comment3）带过去，只是手动拼了一个comment=的参数。如果要真正把三个输入框的内容发送给服务器，建议改成用表单提交的方式：

1. 把Tokyo里的按钮从type="button"改成type="submit"
2. 移除它的onClick属性，让表单默认提交动作来处理

这样修改后，点击Submit按钮时，表单会自动把所有输入框（包括隐藏字段）的内容发送到ACTION指定的服务器地址。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>
<FORM ACTION="/scripts/broker4.exe" METHOD="POST" ENCTYPE="multipart/form-data" name="FrontPage_Form1" style="width: 844px" >
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button type="button" class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button type="button" class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button type="button" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>Enter text here.</p>
  <p><input type="text" name="comment1" value=""></p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Enter text here.</p>
  <p><input type="text" name="comment2" value=""></p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Enter text here.</p>
  <p><input type="text" name="comment3" value=""></p>
  <p><input type="submit" name="Send" value="Submit"></p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
<INPUT TYPE="HIDDEN" NAME="_SERVICE" SIZE="-1" VALUE="emmerich">
<INPUT TYPE="HIDDEN" NAME="_PROGRAM" SIZE="-1" VALUE="gvm.aaa.sas">
</FORM>
</body>
</html>

（注：我还把表单的METHOD="FLAG"改成了METHOD="POST"，因为FLAG不是合法的HTTP请求方法，应该是你打错了，POST是表单提交的常用方法）

内容的提问来源于stack exchange，提问作者Cornelis