基于 HTML 5 Geo Location 按表单选择下拉列表过滤结果答案

【问题标题】：Filtering results by form select dropdown, based on HTML 5 Geo Location基于 HTML 5 Geo Location 按表单选择下拉列表过滤结果
【发布时间】：2015-06-10 11:18:53
【问题描述】：

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

但是，我对如何将它与我的 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>

【问题讨论】：

标签： php html location geo city

【解决方案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;
});
});

【讨论】：