將googlemap位置添加到sql數據庫後用javascript重定向

我對JavaScript很新穎（好吧，我只用了兩天！）。我想在我的網站上做的事情之一是允許用戶添加一個標記到谷歌地圖。我在過去幾天一直在閱讀googlemaps API，並使用了其中一個教程（https://developers.google.com/maps/articles/phpsqlinfo_v3），並根據我的需要對其進行了編輯。標記的經度和緯度使用javascript傳遞到SQL數據庫中。當我檢查數據庫時，我可以看到添加了標記，這很好，但無法從用戶端知道它是否成功。當我點擊'提交'按鈕時，數據被傳遞到數據庫中，但是我想然後重定向到另一個頁面，或者顯示一條消息說它已經成功。將googlemap位置添加到sql數據庫後用javascript重定向

的代碼是：

var marker; 

function initialize() { 
    var latlng = new google.maps.LatLng(37.4419, -122.1419); 
    var options = { 
    zoom: 13, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), options); 

google.maps.event.addListener(map, "click", function(event) { 
    marker = new google.maps.Marker({ 
     position: event.latLng, 
     map: map 
    }); 
}); 
} 

    function saveData() { 
    var latlng = marker.getPosition(); 

    var url = "phpsqlinfo_addrow.php?lng=" + latlng.lng() + "&lat=" + latlng.lat(); 

    downloadUrl(url, function(data, responseCode) { 
     if (responseCode == 200 && data.length <= 1) { 
    window.navigate('index.html') 
    } 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request.responseText, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 
</script> 

<link rel="stylesheet" type="text/css" href="style.css"/> 
<body onload="initialize()"> 
<div id="container"> 
<div id="map_canvas" style="width: 938px; height: 600px"> 
</div> 
</div> 
<div id="footer"> 
<table> 
<tr><td><input type='button' value='Save Marker' onclick='saveData()'/></td></tr> 
</div> 
</body> 
</html>

我刪除一些不必要的東西從那裏。這個問題似乎在'window.navigate'部分，但許多搜索沒有讓我更進一步。

任何幫助表示讚賞！

來源

2012-04-16 NickF

1）你在你行的末尾缺少分號

window.navigate('index.html')

因此將其更改爲：

window.navigate("index.html");

注意添加分號。

2）使用這個代替，因爲這適用於所有的瀏覽器：

window.location.href = '...';

反正做的第一件事就是檢查你是否被實際執行的語句。因此，將某些內容打印到瀏覽器中而不是重定向到其他頁面。如果沒有打印出來，那麼你知道你的if語句甚至沒有被執行。那麼你可以做的是檢查需要if語句執行的變量。因此，您可以在測試if語句並查看條件是否成立之前將數據變量輸出到瀏覽器。在你的情況下，data.length需要是< 1 ...所以在之前打印出數據變量並確保它小於1 ...如果不是，那麼你就知道爲什麼你的if語句沒有被執行，因此知道爲什麼你的網頁不被重定向！

來源

2012-04-16 15:02:43 Pavan

我不認爲在這種情況下分號是必要的。它們不是表達式終止符，它們是表達式分隔符。 – 2012-04-16 15:04:03

最後如果這不起作用，你的if語句沒有被執行，因此Web瀏覽器實際上並沒有將你導航到你想要的位置 - index.html。我還建議你在修復基本錯誤（如果一切都失敗了之後）後要做的是確保你的sql查詢真正起作用。在執行if語句之前.....在javascript中將數據變量輸出到browswer中，以便您可以看到裏面的內容..並且實際檢查data.length是否小於1，因爲那是if語句的唯一方法允許執行，否則你知道它爲什麼沒有。 – Pavan 2012-04-16 15:08:14

你應該做的是返回一個成功代碼，如果標記添加成功（在phpsqlinfo_addrow.php）像這樣：

if(mysql_query("INSERT INTO .....")){ 
    //Success 
    echo 1; 
} else{ 
    //Failed 
    echo 2; 
}

然後在你的Ajax調用，您可以檢查它是否被成功地加入像所以：

request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 

     var response = request.responseText; 

     if(response == 1){ 
      //success 
      callback(request.responseText, request.status); 
     } else{ 
      //failed 
      alert('something went wrong!'); 
     } 
    } 
};

來源

2012-04-16 14:56:52

也許你可以用他用來顯示'downloadUrl'功能它如何工作 – 2012-04-16 15:05:15

繼Terwanerik的答案：

downloadUrl(url, function(data, responseCode) { 
    if (responseCode == 200 && data == "1") { 
     //success 
     window.navigate('index.html') 
    } else{ 
     //failed 
     alert('something went wrong!'); 
    } 
    } 
});

，則應該更換phpsqlinfo_addrow.php文件匹配的內容，他說：

if(mysql_query("INSERT INTO .....")){ 
    //Success 
    echo 1; 
} else{ 
    //Failed 
    echo 2; 
}

來源

2012-04-16 15:07:11

謝謝，這工作完美。 – NickF 2012-04-17 09:15:23

將googlemap位置添加到sql數據庫後用javascript重定向

回答

相關問題