在谷歌地图上使用AJAX和php时，页面会不断刷新_Ajax_Google Maps

在谷歌地图上使用AJAX和php时，页面会不断刷新

ajax google-maps

在谷歌地图上使用AJAX和php时，页面会不断刷新,ajax,google-maps,Ajax,Google Maps,大家好我有一个html文件，如下所示，它显示一个谷歌地图（在window.onload函数中初始化），并有一个表单输入要搜索的地方的名称。当点击submit按钮时，用户输入应该被发送到一个php文件，该文件获取要在地图上显示的坐标。然而，在测试中，现在返回的所有php文件都是相同的用户输入我遇到的问题是，这一系列事件发生了：我输入一些文本，然后单击提交。 innerHTML中的p元素发生更改并显示警报（如onreadystatechange函数中所示）但是，当我关闭警报时，p元素将丢失其

大家好

我有一个html文件，如下所示，它显示一个谷歌地图（在window.onload函数中初始化），并有一个表单输入要搜索的地方的名称。当点击submit按钮时，用户输入应该被发送到一个php文件，该文件获取要在地图上显示的坐标。然而，在测试中，现在返回的所有php文件都是相同的用户输入

我遇到的问题是，这一系列事件发生了：

我输入一些文本，然后单击提交。 innerHTML中的p元素发生更改并显示警报（如onreadystatechange函数中所示）但是，当我关闭警报时，p元素将丢失其数据

我添加了警报，因为当我刚刚使用

document.getElementById("msg").innerHTML=xmlhttp.responseText;

p元素在消失之前短暂地接受了它的新数据

我注意到，当警报出现在屏幕上时，地址栏显示“filename.html”。但当我关闭它，p数据消失时，地址栏显示

filename.html?searchterm=user+input+stuff

即使当我在文本输入为空的情况下单击submit时，也会短暂出现“No text Entered”（未输入文本），在页面“刷新”之前，该文本消失，地址栏显示

filename.html?searchterm=

我很感激能得到的任何帮助

<html>
<head> 
<title>Map</title> 
<link rel="stylesheet" type="text/css" href="stylue.css" />   

<script type="text/javascript"      
src="http://maps.googleapis.com/maps/api/js? 
key=AIzaSyBksQ7NlV6eXk6w5w8222lolqdPHsN_8ls&sensor=false">    
</script> 

<script type="text/javascript">


var panorama;
var map;



function initialize() {

//create Google Map   
}

//other Google Maps functions   

function searchdb(userInput){

    var xmlhttp;    
    if (userInput==""){
        document.getElementById("msg").innerHTML="No Text Entered";
    }else{
        if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
        }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }


  xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("msg").innerHTML=xmlhttp.responseText;
    alert(xmlhttp.responseText);
  }
        }
        xmlhttp.open("GET","searchpageajax.php?searchterm="+userInput,true);
        xmlhttp.send();
   }

}

window.onload= function () { 
    initialize(); 
} 


</script>


</head>
<body >

<h1>Map</h1>

<p>Enter a room code or building name to search.</p>

<form name="inputform" >
<input type="text" name="searchterm" /> 
<input type="submit" value="Search" onclick="searchdb(searchterm.value)"/>
<input type="reset" value="Clear" />
<br/>
<p id ="msg"></p>
<br/>
</form>


<div id="container">
    <div id="map_canvas"></div>
    <div id="streetview_canvas"></div>
</div>

</body>
</html>


地图
var全景图；
var映射；
函数初始化（）{
//创建谷歌地图
}
//谷歌地图的其他功能
函数searchdb（用户输入）{
var-xmlhttp；
如果（userInput==“”）{
document.getElementById（“msg”）.innerHTML=“未输入文本”；
}否则{
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}
否则{
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“msg”）.innerHTML=xmlhttp.responseText；
警报（xmlhttp.responseText）；
}
}
open（“GET”，“searchpageajax.php？searchterm=“+userInput，true”）；
xmlhttp.send（）；
}
}
window.onload=函数（）{
初始化（）；
} 
地图
输入要搜索的房间代码或建筑名称

页面被刷新，因为onsubmit函数没有返回false

（可能还有其他的）。

这对我很有用。我觉得这是基本的东西，但我真的不知道这一点。谢谢你的帮助。