通過基於HTML 5的表單選擇下拉菜單篩選結果5地理位置

Question

我有一個簡單的表單選擇下拉菜單，按城市篩選行。現在我想要做的是根據用戶的位置過濾這些結果。我最近了解到，您可以使用HTML地理位置獲取用戶的位置（長，緯度）。下面是這樣做的腳本。

但是，我對如何使用PHP代碼從基於所選城市的MySQl數據庫檢索行有點遺憾？

<script> 
 
\t \t $(document).ready(function(){ 
 
\t \t \t var x = document.getElementById("demo"); 
 

 
\t \t \t function getLocation() { 
 
\t \t \t \t if (navigator.geolocation) { 
 
\t \t \t \t \t navigator.geolocation.getCurrentPosition(showPosition, showError); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t x.innerHTML = "Geolocation is not supported by this browser."; 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t function showPosition(position) { 
 
\t \t \t \t x.innerHTML = "Latitude: " + position.coords.latitude + 
 
\t \t \t \t "<br>Longitude: " + position.coords.longitude; \t 
 
\t \t \t } 
 

 
\t \t \t function showError(error) { 
 
\t \t \t \t switch(error.code) { 
 
\t \t \t \t \t case error.PERMISSION_DENIED: 
 
\t \t \t \t \t \t x.innerHTML = "User denied the request for Geolocation." 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case error.POSITION_UNAVAILABLE: 
 
\t \t \t \t \t \t x.innerHTML = "Location information is unavailable." 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case error.TIMEOUT: 
 
\t \t \t \t \t \t x.innerHTML = "The request to get user location timed out." 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t \t case error.UNKNOWN_ERROR: 
 
\t \t \t \t \t \t x.innerHTML = "An unknown error occurred." 
 
\t \t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t getLocation(); 
 
\t \t \t showPosition(position); 
 
\t \t }); \t 
 
\t \t </script>

Answer 1

你會希望通過Ajax調用後，你已經收到了PHP腳本的數據。

這裏只是一個例子，但你應該能夠從那裏與它的工作：

$(document).ready(function(){ 
$("#submit").click(function(){ 
var name = $("#name").val(); 
var email = $("#email").val(); 
var password = $("#password").val(); 
var contact = $("#contact").val(); 
// Returns successful data submission message when the entered information is stored in database. 
var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact; 
if(name==''||email==''||password==''||contact=='') 
{ 
    alert("Please Fill All Fields"); 
} 
else 
{ 
// AJAX Code To Submit Form. 
$.ajax({ 
     type: "POST", 
     url: "ajaxsubmit.php", 
     data: dataString, 
     cache: false, 
     success: function(result){ 
     alert(result); 
} 
}); 
} 
return false; 
}); 
});