我在SQL数据库中修复了lattitude和longitude（lat，lng）值。现在我想做以下事情：当我在搜索框中输入城市名称时，在onClick事件上它通过POST将数据发送到php文件，并生成一个SQL查询，返回lat，lng数据。现在我想调用javascript函数，用PHP文件中的lat，lng参数加载地图。我希望所有这一切都发生在一个简单的onClick事件上。
这是我的javascript函数，它应该初始化地图（load（）函数）：
function getFile() {
if (window.XMLHttpRequest) {
AJAX=new XMLHttpRequest();
} else {
AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
if (AJAX) {
var searchField = document.getElementById("searchField");
AJAX.open("POST", "gmap.php", false);
AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
AJAX.setRequestHeader("Content-length", searchField.value.length);
AJAX.setRequestHeader("Connection", "close");
AJAX.send("foo=" + searchField.value);
return load(AJAX.responseText);
} else {
return false;
}
}
这是我的gmap.php文件：
<?php
header( 'Content-Type: text/html; charset=UTF-8' );
mb_internal_encoding( 'UTF-8' );
$a = $_POST['searchField'];
$dbhost = "localhost";
$dbuser = "*******";
$dbpass = "*******";
$dbname = "citydb";
//connect sql
mysql_connect($dbhost, $dbuser, $dbpass);
//select db
mysql_select_db($dbname) or die(mysql_error());
//retrieve data
//$city=$_GET['city'];
//escape user input to help prevent SQL injection
//$city=mysql_real_escape_string($city);
//query
mysql_query('SET CHARACTER SET utf8');
$result=mysql_query("SELECT citystart, cityend FROM cityids WHERE city='$a' ");
if(!result) {
die("Database query failed: " . myql_error());
}
while($row=mysql_fetch_array($result)) {
$lat=$row['citystart'];
$lng=$row['cityend'];
这是onClick电话：
<input type="submit" class="regular" name="FindEv" value="FindEv" onClick="getFile(); return false;" />
问题是在PHP数据返回之前调用了javascript函数load（）。我现在花了一个多星期来解决这个问题，但我找不到解决方案。我试过eval（），我也试过从PHP调用load（）函数，因为它在一个onClick事件里面，因为它在div中，所以load（）函数没有exetuce ，当我继续检查元素i Firebug时，它只显示在div中。
我在谈论GLatLng（）的lat，lng值。
感谢任何帮助。如果有人有更好的想法来解决这个问题，请帮助。
答案 0 :(得分：2)
我实际上对mysql做了同样的事情。我使用的谷歌地图API虽然有点不同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Map API Test</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAh6DEO6zsM8Xua6WBNm-dbBRD8yUxCv4Esyhw4vpb86bE3mijaBS3Fcz1Rq_adaGcRea0Mlr9lNqAJw"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var iconYellow = new GIcon();
iconYellow.image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';
iconYellow.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconYellow.iconSize = new GSize(12, 20);
iconYellow.shadowSize = new GSize(22, 20);
iconYellow.iconAnchor = new GPoint(6, 20);
iconYellow.infoWindowAnchor = new GPoint(5, 1);
var iconGreen = new GIcon();
iconGreen.image = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
iconGreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconGreen.iconSize = new GSize(12, 20);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(6, 20);
iconGreen.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["175"] = iconGreen;
customIcons["200"] = iconGreen;
customIcons["225"] = iconGreen;
customIcons["250"] = iconBlue;
customIcons["275"] = iconBlue;
customIcons["300"] = iconBlue;
customIcons["325"] = iconRed;
customIcons["350"] = iconRed;
customIcons["375"] = iconRed;
customIcons["100"] = iconYellow;
customIcons["125"] = iconYellow;
customIcons["150"] = iconYellow;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.8163, -98.55762), 4);
GDownloadUrl("markerData.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var mapTime = markers[i].getAttribute("time");
var mapSize = markers[i].getAttribute("size");
var mapCity = markers[i].getAttribute("city");
var mapState = markers[i].getAttribute("state");
var mapPop = markers[i].getAttribute("pop");
var type = markers[i].getAttribute("size");
var mapComments = markers[i].getAttribute("comments");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, mapTime, mapSize, mapCity, mapState, mapPop, mapComments, type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, mapTime, mapSize, mapCity, mapState, mapPop, mapComments, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "Time: " + mapTime + "<br/>" + "Size: " + mapSize + "<br/>" + "Location: " + mapCity + ", " + mapState + "<br/>" + "Population: " + mapPop + "<br/>" + "Comments: " + mapComments;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 750px; height: 500px"></div>
<div style="width: 750px; text-align: center"><img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png" /> Less than 1.75"
<img src="http://labs.google.com/ridefinder/images/mm_20_green.png" /> 1.75" - 2.25"
<img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" />2.50" - 3.00"
<img src="http://labs.google.com/ridefinder/images/mm_20_red.png" />3.25" - 3.75"
</div>
</body>
</html>
Map Info.php create_element（ “标志物”）; $ parnode = $ doc-＆gt; append_child（$ node）;
// Opens a connection to a MySQL server
$connection=mysql_connect ($host, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}// Select all the rows in the markers table
$query = "SELECT * FROM mapData WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $doc->create_element("marker");
$newnode = $parnode->append_child($node);
$newnode->set_attribute("time", $row['Time']);
$newnode->set_attribute("size", $row['Size']);
$newnode->set_attribute("city", $row['City']);
$newnode->set_attribute("state", $row['State']);
$newnode->set_attribute("pop", $row['Population']);
$newnode->set_attribute("comments", $row['Comments']);
$newnode->set_attribute("lat", $row['Latitude']);
$newnode->set_attribute("lng", $row['Longitude']);
}
$xmlfile = $doc->dump_mem(); echo $xmlfile;
＆GT;
答案 1 :(得分：2)
AJAX（关键字异步）不会阻止脚本的其余部分按预期执行。
您必须使用onreadystatechange方法检查已完成的请求...
AJAX.onreadystatechange = function() {
if (AJAX.readyState == 4 && AJAX.status == 200) {
load(AJAX.responseText);
}
}