使用AJAX从数据库取数，结果闪显后消失问题求助

问题根源 #

你页面里的按钮类型是submit，点击后会触发表单的默认提交行为——浏览器会刷新页面（或跳转到表单指定的action地址），导致AJAX获取到的内容刚显示就被页面刷新冲掉了。

解决方案 #

下面提供几种简单有效的修复方式：

方式1：修改按钮类型为button

直接把按钮的type="submit"改成type="button"，彻底避免触发表单提交：

<form class="form-inline">
  
  <div class="form-group mb-2 ml-0">
    <label for="accnum1" class="sr-only">Account Number</label>
    <input type="text" class="form-control" id="accnum1" placeholder="Account number">
  </div>
  <button type="button" class="btn btn-secondary mb-2 mr-1">[x]</button>
  <button type="button" class="btn btn-primary mb-2" onclick='showUser(document.getElementById("accnum1").value);'>Search Profile</button>
</form>
<div id="txtHint"><b>Person info will be listed here...</b></div>

方式2：在点击事件中阻止默认行为

如果不想修改按钮类型，可在onclick事件末尾添加return false，阻止表单提交：

<button type="submit" class="btn btn-primary mb-2" onclick='showUser(document.getElementById("accnum1").value); return false;'>Search Profile</button>

方式3：通过事件对象阻止默认行为

更规范的做法是利用事件对象的preventDefault()方法：

function showUser(str, event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","family.php?q="+str,true);
    xmlhttp.send();
  }
}

对应的按钮代码：

<button type="submit" class="btn btn-primary mb-2" onclick='showUser(document.getElementById("accnum1").value, event);'>Search Profile</button>

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