按钮标签的表单属性会导致页面重新加载 - The button tag's form attribute causes the page reload?

首先，这是我的AJAX代码：

<script>
function ajaxInsert() {
  var xmlhttp = new XMLHttpRequest()
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("select").innerHTML = xmlhttp.responseText
    }
  }
  var user = document.getElementById("user").value
  var pwd = document.getElementById("pwd").value
  var email = document.getElementById("email").value
  var str = "user=" + user + "&pwd=" + pwd + "&email=" + email
  // document.write(str)
  xmlhttp.open("post", "getconnectforxmlhttp.php", true)
  xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded")
  xmlhttp.send(str)
}

然后，我的表格：

<form method="post" id="insertform">
  <label for="user">用户名</label><input type="text" id="user" name="user">
  <label for="pwd">密码</label><input type="password" id="pwd" name="pwd">
  <label for="email">邮箱</label><input type="email" id="email" name="email">
</form>
<button form="insertform" onclick="ajaxInsert()">提交</button>
<div id="select"></div>

最后，我在getconnectforXMLlhttp.php文件中的PHP代码：

<?php
$pdo = new PDO("mysql:host=localhost; dbname=db_test", "root", "");
if (isset($_POST)) {
  $values = "'".implode("', '", array_values($_POST))."'";
}
$str = "";
try {
  $resp = $pdo->prepare("INSERT INTO user (user, pwd, email) VALUES    ($values)");
  $resp->execute();
} catch (Exception $e) {
  $str .= "Error".$e->getMessage()."<br>";
}
if ($pdo->lastInsertId()) {
  try {
    $res = $pdo->prepare("SELECT * FROM user");
    $res->execute();
  } catch (Exception $e) {
    $str .= "Error".$e->getMessage()."<br>";
  }
  $result = $res->fetchAll(PDO::FETCH_ASSOC);
  for ($i=0; $i < count($result); ++$i) {
    $str .= $result[$i]["id"]."&nbsp;".$result[$i]["user"]."&nbsp;"
    .$result[$i]["pwd"]."&nbsp;".$result[$i]["email"]."<br>";
  }
  echo $str;
} else {
  $str .= "插入失败";
  echo $str;
}
?>

它

的作用是在本地数据库中的表用户中插入一个新行，然后在div 标签之间显示它们.但是当我运行此代码时，插入语句成功，并且结果（在div 标签之间）显示第二个，是的，它确实显示，但奇怪的是，然后它消失了，消失了。现在我知道怎么做对了，只需删除开始按钮标签中的 form 属性，然后将div 标签的 id 值更改为其他内容，例如：

<button  onclick="ajaxInsert()">提交</button>
<div id="sel"></div>

也像document.getElementById("sel").innerHTML = xmlhttp.responseText一样更改AJAX代码，但有一点问题：I不知道发生了什么，我当初写的形式有什么问题，有什么变化解决了问题？

我相信

你在问为什么当你点击按钮而不是运行你的javascript时你的页面会刷新。这可能是因为按钮链接到具有form属性的窗体。这不是提交表单的标准方式。

HTML 表单需要提交action和method属性。如果没有 action 属性，表单将默认提交到同一页面，这将解释页面刷新。

虽然你打算使用AJAX提交你的表单，但如果你的JavaScript中断了会怎样？如果您的用户没有启用 JavaScript，会发生什么情况？在这两种情况下，您的表单都无法提交。

此外，HTML 表单是使用 submit 类型的输入提交的。这意味着您的表单可能看起来像这样;

<form method="post" action="getconnectforxmlhttp.php"  onsubmit="event.preventDefault(); ajaxInsert();" id="insertform">
  <label for="user">用户名</label><input type="text" id="user" name="user">
  <label for="pwd">密码</label><input type="password" id="pwd" name="pwd">
  <label for="email">邮箱</label><input type="email" id="email" name="email">
  <input type="hidden" name="return" value="html">
  <input type="submit" value="提交">
</form>
<div id="select"></div>

如果此表单在没有 AJAX 的情况下提交，则它将向 getconnectforxmlhttp.php 提交所有数据。输入<input type="hidden" name="return" value="html">将允许您知道没有JavaScript，PHP应该返回一个HTML页面来显示数据。

否则，您的 AJAX 将提交到 PHP 文件而不隐藏输入。在这种情况下，您的PHP文件可以只返回数据。

对于启用了 JavaScript 的用户，将使用表单属性 onsubmit ;

 onsubmit="event.preventDefault(); ajaxInsert();"

这将首先停止表单正常提交，然后调用函数使用 AJAX 提交表单。

这种对JavaScript的改进被称为渐进式增强，它允许你的系统为每个人工作，但在可能的情况下工作得更好。这是有利的，而不是让它不适合所有人，但对某些人更好