从PHP逻辑中调用JavaScript时出错
我正在从数据库中打印出许多行。每行包含一个td，其中包含的id是相应的行号（行号从1开始） 当每一行都被回显时，我使用javascript.appendChild（）更新这些行的地址，这些地址的坐标是从db调用的 前5行坐标已正确转换为地址，其余行具有从db调用的正确坐标（我知道，因为我检查了源代码），但在行中输入的地址始终是db上最后一行的值 请注意，坐标正在使用谷歌地图api转换为地址从PHP逻辑中调用JavaScript时出错,php,javascript,google-maps,logic,Php,Javascript,Google Maps,Logic,我正在从数据库中打印出许多行。每行包含一个td，其中包含的id是相应的行号（行号从1开始） 当每一行都被回显时，我使用javascript.appendChild（）更新这些行的地址，这些地址的坐标是从db调用的 前5行坐标已正确转换为地址，其余行具有从db调用的正确坐标（我知道，因为我检查了源代码），但在行中输入的地址始终是db上最后一行的值 请注意，坐标正在使用谷歌地图api转换为地址 if ( mysql_num_rows( $result ) > 0 ){ $i = 1;
if ( mysql_num_rows( $result ) > 0 ){
$i = 1;
while($row = mysql_fetch_array($result)){
echo "<tr>";
?>
<script>
initialize();
var counter = 1;
function initialize() {
var geocoder;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(<?php echo $row['latitude'] ?>,<?php echo $row['longitude'] ?>);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var txt = results[0].formatted_address;
var newtext = document.createTextNode(txt);
document.getElementById("address" + counter).appendChild(newtext);
counter++;
} else {
alert('No results found');
}
} else {
//alert('Geocoder failed due to: ' + status);
}
});
}
setInterval(convert, 2);
function convert() {
initialize();
}
</script>
<?php
echo "<td id='address" . $i . "'></td>";
$i++;
}
if（mysql_num_rows（$result）>0）{
$i=1；
while（$row=mysql\u fetch\u数组（$result））{
回声“；
?>
初始化（）；
var计数器=1；
函数初始化（）{
var地理编码器；
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（，）；
geocoder.geocode（{'latLng'：latLng}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
如果（结果[1]）{
var txt=results[0]。格式化的\u地址；
var newtext=document.createTextNode（txt）；
document.getElementById（“地址”+计数器）.appendChild（newtext）；
计数器++；
}否则{
警报（“未找到结果”）；
}
}否则{
//警报（'地理编码器因：'+状态而失败）；
}
});
}
设置间隔（转换，2）；
函数转换（）{
初始化（）；
}
诚恳地说，这种方法是web开发中最糟糕的方法：我强烈建议您学习分离关注点，即保留数据[mysql]、逻辑[php]、表示[html]、客户端交互[js]尽可能分开。如果需要从服务器检索数据，可以将其作为JSON传递，或者使用data-*
属性将其注入DOM[仅用于较小的目的]。我将如何将json与php和javascript结合使用？我建议您后退一步，学习更多的php、html和javascript。将您的javascript与html分开，学习什么是Domrey事件并使用它。不幸的是，您的问题中有太多错误，因此除非有人重写，否则您将无法获得帮助提示：在chrome开发者工具或firebug中检查你的代码，这将教会你很多东西。
<?php
// security check
$account_type = $_COOKIE["account_type"];
if($account_type != "canvass_leader" && $account_type != "leader" && $account_type != "canvasser"){
header("location:login.php");
}
$username_cookie2 = $_COOKIE["username_cookie"];
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css"/>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<title>Canvassing Data</title>
<style type="text/css">
#header #welcome #para{
margin-top: -84px;
}
</style>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
function setUp() {
window.counter = 1;
setInterval(initialize, 700);
}
function initialize() {
var geocoder;
geocoder = new google.maps.Geocoder();
var lat = document.getElementById("lat" + counter);
var lng = document.getElementById("lng" + counter);
//alert(lat.innerHTML);
//alert(lng.innerHTML);
var latlng = new google.maps.LatLng(lat.innerHTML,lng.innerHTML);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var txt = results[0].formatted_address;
var addressValue = document.createTextNode(txt);
$('#lat' + counter).remove();
$('#lng' + counter).remove();
var element = "#address" + counter;
$(element).append(addressValue)
counter++;
} else {
alert('No results found');
}
} else {
//alert('Geocoder failed due to: ' + status);
}
});
}
</script>
</head>
<body onload="setUp()" >
<div id="wrapper">
<?php
include('header.php');
// connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
// get party cookie
$party = $_COOKIE["party"];
// set table name
$tbl_name = "checklist_" . $party;
?>
<div id='info_bubble'>From this page you can view, search and export all collected canvassing data.</div>
<?php if($account_type == "canvass_leader") { ?>
<div style="text-align: center;">
<form id="" method="post" action="" style="margin: 20px 0 30px 0;">
<h3>Search Canvassing Data</h3>
<fieldset id="inputs" >
<input style="width: 270px;" name="search_name" type="text" placeholder="Search by canvasser name.." >
<input style="width: 270px;" name="search_reception" type="text" placeholder="Search by reception at door.." >
</fieldset>
<fieldset id="actions" class="button button-blue">
<span><input type="submit" id="submit" name="search" value="Search Data"></span>
</fieldset>
</form>
</div>
<?php } ?>
<?php
if(isset($_POST['search'])) {
$search_name = $_POST['search_name'];
$search_reception = $_POST['search_reception'];
if(strlen($search_name)) {
$sql = "SELECT * FROM $tbl_name WHERE canvasser = '$search_name'";
$result = mysql_query($sql);
}
if(strlen($search_reception)) {
$sql = "SELECT * FROM $tbl_name WHERE reception_at_door = '$search_reception'";
$result = mysql_query($sql);
}
}
else{
if($account_type == "canvass_leader") {
$sql = "SELECT * FROM $tbl_name WHERE creator = '$username_cookie2'";
$result = mysql_query($sql);
}
else { // account_type = Leader
$sql = "SELECT * FROM $tbl_name";
$result = mysql_query($sql);
}
}
// display table data
echo "<div id='content'>
<table class='bordered' border='1'>
<tr>
<th>Address</th>
<th>House Number</th>
<th>Registered to Vote</th>
<th>Visited by Candidate</th>
<th>Leafleted</th>
<th>Canvassed</th>
<th>Reception at Door</th>
<th>Canvasser</th>
</tr>";
if ( mysql_num_rows( $result ) > 0 ){
//$num_rows = mysql_num_rows($result);
//echo "$num_rows Rows\n";
$i = 1;
while($row = mysql_fetch_array($result)){
echo "<tr>";
?>
<?php
//echo "<td id='address" . $i . "'></td>";
//echo "<td id='address" . $i . "'>" . $row['latitude'] . " ## " . $row['longitude'] . "</td>";
//echo "<td id='address" . $i . "'>" . $row['latitude'] . " ## " . $row['longitude'] . "</td>";
echo "<td id='address" . $i . "'><p id='lat" . $i . "'>" . $row['latitude'] . "</p><p id='lng" . $i . "'>" . $row['longitude'] . "</p></td>";
// only set co-ordiantes first, then convert them to address by getElementById and appendChild when dom is ready in js in head of page
echo "<td>" . $row['house_number'] . "</td>";
echo "<td>" . $row['registered_to_vote'] . "</td>";
echo "<td>" . $row['visited_by_candidate'] . "</td>";
echo "<td>" . $row['leafleted'] . "</td>";
echo "<td>" . $row['canvassed'] . "</td>";
echo "<td>" . $row['reception_at_door'] . "</td>";
echo "<td>" . $row['canvasser'] . "</td>";
echo "</tr>";
$i++;
}
}
echo "</table>";
if( $account_type == "canvass_leader" || $account_type == "leader"){
echo '<form style="margin-top: 10px;" action="dash_data_canvassing_export.php">';
echo '<fieldset id="actions" class="button button-blue"><span><input type="submit" value="Export Data" id="submit" name="submit"></span></fieldset>';
echo '</form></div>';
}
include('footer.php');
?>
</div>
</body>
</html>