根据HTML 5地理位置,通过表单选择下拉列表过滤结果

时间:2015-04-06 03:14:16

标签: php html5 location geo city

我有一个简单的表单选择下拉菜单按城市过滤行。现在我要做的是根据用户的位置过滤这些结果。我最近了解到,您可以使用HTML地理位置获取用户的位置(long,lat)。下面是执行该操作的脚本。

但是,我对如何使用我的PHP代码从基于所选城市的MySQl数据库中检索行的方式有点迷失?



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

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

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

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

1 个答案:

答案 0 :(得分:0)

您希望通过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;
});
});