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

Posted 2023-03-23

【中文标题】基于 HTML 5 Geo Location 按表单选择下拉列表过滤结果

【英文标题】：Filtering results by form select dropdown, based on 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>

【参考方案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;
);
);