Question

首先，这是我的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>

最后，我的php代码在getconnectforxmlhttp.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标签之间显示它们。但是当我运行此代码时，insert语句成功，结果（在div标签之间））显示第二个，是的，它确实显示，但奇怪的是，它已经消失，消失了。现在我知道如何正确操作，只需删除开始按钮标记中的表单属性，并更改id的值将div标签转换为其他内容，例如：

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

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

Answer 1

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

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

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

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

<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的方法称为渐进式增强，它允许您的系统为所有人工作，但在可行的情况下工作得更好。这是有利的，而不是让每个人不工作，但对某些人来说效果更好

按钮标签的表单属性会导致页面重新加载吗？

1 个答案: