Javascript 我的php生成的表单在一秒钟后从HTML页面消失

我正在为娱乐活动编制一份调查表。用户需要输入一个位置，然后在MYSQL数据库中搜索，以确保输入的名称与位置的标准名称匹配。结果将以选择形式显示，以允许用户选择特定位置

查询似乎工作正常。我已经通过警报窗口验证了返回字符串。然而，表单出现了一小秒，然后消失了。我已经尝试将innerHTML字符串写入标记并直接写入表单。我发现关于这个主题的其他帖子表明表单标记没有正确关闭。这似乎不是我的问题

当我使用硬编码位置从测试页面运行php脚本时，页面上没有其他元素，它工作得很好

我的js脚本：

<script> function getLoc(){

    var dataRequest;

    try {        
        // Opera 8.0+, Firefox, Safari
        dataRequest = new XMLHttpRequest();
        } catch (e) {

            // Internet Explorer Browsers
            try {
                dataRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {

                try {
                    dataRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {

                    // Something went wrong
                    alert("Your browser needs to be updated to run this 
                    application!");
                    return false;
                    }
        }
    }       

    dataRequest.onreadystatechange = function() {
        if(dataRequest.readyState == 4) {
            if (dataRequest.status==200 || 
                window.location.href.indexOf("http")==-1){
                    document.getElementById("locDropDown").innerHTML = 
                dataRequest.responseText;
            }
            else{
                alert("An error has occured making the request");
            }
        }
    }  
var queryString = "";
queryString = 
  encodeURIComponent(document.getElementById('locStr').value.toUpperCase()); 

dataRequest.open("POST", "retrieveLoc.php", true);
dataRequest.setRequestHeader("Content-type", "application/x-www-form- 
    urlencoded");
dataRequest.send("searchValue=" + queryString);

}

</script>

<div>
    <form id="floc">
        <strong>Where Did You Go:</strong> <input type="text" id = "locStr" 
        placeholder="location"> 
        <input type="submit" value="Search" onclick="getLoc()">
    </form>
</div>

<!--    <div id="dataDiv"> -->
  <form id="locDropDown">
  </form>
<!--    </div> -->

函数getLoc（）{ var数据请求； 试试{ //Opera 8.0+、Firefox、Safari dataRequest=新的XMLHttpRequest（）； }捕获（e）{ //Internet Explorer浏览器 试一试{ dataRequest=newActiveXObject（“Msxml2.XMLHTTP”）； }捕获（e）{ 试一试{ dataRequest=newActiveXObject（“Microsoft.XMLHTTP”）； }捕获（e）{ //出了点问题 警报（“您的浏览器需要更新才能运行此 申请表格);； 返回false； } } } dataRequest.onreadystatechange=函数（）{ if（dataRequest.readyState==4）{ 如果（dataRequest.status==200 | | window.location.href.indexOf（“http”）=-1）{ document.getElementById（“locDropDown”）.innerHTML= dataRequest.responseText； } 否则{ 警报（“发出请求时发生错误”）； } } } var queryString=“”； 查询字符串= encodeURIComponent（document.getElementById（'locStr'）.value.toUpperCase（））； open（“POST”，“retrieveLoc.php”，true）； dataRequest.setRequestHeader（“内容类型”，“应用程序/x-www-form- "(修订);； dataRequest.send（“searchValue=“+queryString”）； } 你去了哪里： 我的php脚本的相关部分：

<?php

$queryStr = htmlspecialchars($_POST['searchValue']);
$queryStr .= "%";

// Check sql
$locSql = "SELECT location FROM `location_lkup`  \n"
    . "WHERE location LIKE '" .$queryStr. "' \n"  
    . "ORDER BY `location_lkup`.`location` ASC";

$locRslt = $conn->query($locSql);

//Build Result String
/* $display_string = "<form id = 'locDropDown'>"; */
   $display_string .= "<select name = 'locChoices'>";

// If returned records >0 insert a new row in the select form for each loc 
   returned

if ($locRslt -> num_rows > 0) {
$rowcounter = 1;
while($row = $locRslt -> fetch_array(MYSQLI_ASSOC)) {
$display_string .= "<option value = " . $rowcounter . ">" . $row['location'] 
. "</option>";
$rowcounter++;
}
}
else {
    $display_string .= "<option value = '1'> NO DATA </option>" ;
}  

$display_string .= "</select>";
$display_string .= "<input type = 'button' value= 'Select' onclick= 
   'getSelectedloc()'>";

 /* $display_string .= "</form>"; */

 echo $display_string;
?> 

---

放入一些
console.log
语句来诊断javascript的路径。我假设
document.getElementById（“locDropDown”）.innerHTML=dataRequest.responseText
正在插入破坏HTML的数据。如果可以，使用jQuery会容易得多。这是一项很好的学习技能，可以简化事情。谢谢。我会试试看