0

皆さん、こんにちは。

次のような html ファイルがあります。このファイルには、Google マップが表示され (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>
4

1 に答える 1

0

onsubmit 関数が false を返さないため、ページが更新されます。

この投稿を参照してください（おそらく他にもあるでしょう）。

于 2012-07-21T23:33:19.820 に答える