当使用AJAX和php与谷歌地图时,页面保持刷新

时间:2012-07-21 23:24:28

标签: ajax google-maps

美好的一天,

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

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

我输入一些文字,然后点击提交。 p元素innerHTML被更改并出现警报(如在onreadystatechange函数中) 但是,当我关闭警报时,p元素会丢失其数据。

我添加了警报,因为我刚刚使用

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

p元素在消失之前简要地接受了新数据。

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

filename.html?searchterm=user+input+stuff

即使我单击提交时文本输入为空,我会在页面“刷新”之前短暂显示“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>

1 个答案:

答案 0 :(得分:0)

页面被刷新,因为你的onsubmit函数没有返回false。

See this post(可能有其他人)。