大家好,
我有一个如下的 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
即使我在文本输入为空的情况下单击提交,我也会短暂出现“未输入文本”,在页面“刷新”之前,该文本消失,地址栏显示
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>