Javascript 如何以html格式获取地理位置并将其发布到php/sql数据库中

我正在建立一个类似AirBnB的网站，当用户添加公寓时，我需要他们能够单击按钮获取经度和纬度，然后我需要通过php/sql代码将经度和纬度发布到我的数据库中

我已经尝试了很多代码，比如下面的代码，它可以很好地获取用户的当前位置，我对此很满意，但我不确定如何将varibales发布到php/sql数据库。我的数据库连接工作正常

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p><strong>Note:</strong> The geolocation property is not supported in 
IE8 and earlier versions.</p>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

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

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

单击按钮获取您的坐标

试试看
注意：中不支持地理位置属性
IE8和早期版本


var x=document.getElementById（“演示”）；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
功能显示位置（位置）{
x、 innerHTML=“纬度：”+position.coords.Latitude+
“
经度：”+position.coords.Longitude；

}

基本上，我需要了解如何将上面代码中的javascript中的经度和纬度发布到php文件中（我知道在php文件中成功访问后如何将其发布到数据库）

编辑：已解决，这是我最后使用的代码：

 <input id="lat" type="text" value=""> 
 <input id="long" type="text" value=""> 
 <button onclick="getLocation();">GO</button>
 <script>
    function getLocation()
      {
       navigator.geolocation.getCurrentPosition(function(position)
        {
         var coordinates = position.coords;
         document.getElementById('lat').value = coordinates.latitude;
         document.getElementById('long').value = coordinates.longitude;
       });
     }
 </script>

去
函数getLocation（）
{
navigator.geolocation.getCurrentPosition（函数（位置）
{
变量坐标=位置坐标；
document.getElementById（'lat'）。值=坐标。纬度；
document.getElementById（'long'）。值=坐标。经度；
});
}

一个非常快速、简单的ajax函数（未经测试），可由

地理定位

回调调用，并发送

参数

对象负载中所需的任何信息

<script>
    var x = document.getElementById("demo");

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

    /* utility to build querystring from Object */
    function buildparams(p){
        if( p && typeof( p )==='object' ){
            p=Object.keys( p ).map(function( k ){
                return typeof( p[ k ] )=='object' ? buildparams( p[ k ] ) : [ encodeURIComponent( k ), encodeURIComponent( p[ k ] ) ].join('=')
            }).join('&');
        }
        return p;
    };

    /* ultra basic ajax function that only sends a POST request to nominated URL */
    function ajax(url,params,callback){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if( this.readyState==4 && this.status==200 )callback( this.response );
        }
        xhr.open('POST',url,true );
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
        xhr.send( buildparams( params ) );
    }








    function showPosition( position ) {
        /*
            the callback to the Geolocation request 
            fires the ajax request to whatever backend
            PHP script will process the POST request

            In the PHP script uyou should have access
            to $_POST['lat'] and $_POST['lng']
        */
        var url=location.href;
        var params={ lat:position.coords.latitude,lng:position.coords.longitude };
        var callback=function(r){
            console.info( r );
            x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
        }

        /* trigger the ajax request */
        ajax( url, params, callback );
    }
</script>

---

一个非常快速简单的ajax函数（未经测试），由

Geolocation

回调调用，并发送

params

对象负载中所需的任何信息

<script>
    var x = document.getElementById("demo");

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

    /* utility to build querystring from Object */
    function buildparams(p){
        if( p && typeof( p )==='object' ){
            p=Object.keys( p ).map(function( k ){
                return typeof( p[ k ] )=='object' ? buildparams( p[ k ] ) : [ encodeURIComponent( k ), encodeURIComponent( p[ k ] ) ].join('=')
            }).join('&');
        }
        return p;
    };

    /* ultra basic ajax function that only sends a POST request to nominated URL */
    function ajax(url,params,callback){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if( this.readyState==4 && this.status==200 )callback( this.response );
        }
        xhr.open('POST',url,true );
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
        xhr.send( buildparams( params ) );
    }








    function showPosition( position ) {
        /*
            the callback to the Geolocation request 
            fires the ajax request to whatever backend
            PHP script will process the POST request

            In the PHP script uyou should have access
            to $_POST['lat'] and $_POST['lng']
        */
        var url=location.href;
        var params={ lat:position.coords.latitude,lng:position.coords.longitude };
        var callback=function(r){
            console.info( r );
            x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
        }

        /* trigger the ajax request */
        ajax( url, params, callback );
    }
</script>

---

像这样的东西应该能奏效。只需构建一个表单对象并向其添加地理位置，然后通过ajax请求发送它

var formData = new FormData();
formData.append("lat", x.lat);
formData.append("lon", x,lon);    

$.ajax({
  type: "POST",
  url: url,
  data: formData.serialize(),
  success: success,
  dataType: dataType
});

---

---

像这样的东西应该可以奏效。只需构建一个表单对象并向其添加地理位置，然后通过ajax请求发送它

var formData = new FormData();
formData.append("lat", x.lat);
formData.append("lon", x,lon);    

$.ajax({
  type: "POST",
  url: url,
  data: formData.serialize(),
  success: success,
  dataType: dataType
});


在
showPosition
回调函数中发出
ajax
请求，并使用ajax回调在地图上显示标记或任何适当的东西我认为您需要对AJAXI做一些研究我已经研究了很长时间，在ajax中尝试了很多东西，但似乎无法理解，你能给我一些线索让我知道去哪里找吗？如果你想要一个使用php的Ajax请求的工作示例：在js下面的注释中有一个带有所需php的表单。将表单、javascript和php添加到您的服务器，查看它们是如何协同工作的。在
showPosition
回调函数中发出
ajax
请求，并使用ajax回调在地图上显示标记或任何适当的内容。我认为您需要对AJAXI进行一些研究，我已经研究了很长时间，在AJAX中尝试了很多东西，但似乎无法解决问题，您是否可以给我一些线索，让我知道应该在哪里查找？如果您想要一个使用php的AJAX请求的工作示例：在js下面的注释中有一个包含所需php的表单。将表单、javascript和php添加到服务器，看看它们是如何协同工作的。RamRaider代码运行得很好，但我不确定哪部分是php变量，你能澄清一下吗？在php脚本中，在ajax函数中标识为
url
，你应该可以访问POST数组。在该POST数组中，您应该可以找到
$\u POST['lat']
和
$\u POST['lng']
——它们对应于javascript
参数
object.RamRaider中指定的属性名称。我看到了，我将其添加到了我的代码中，它运行html文件，但不运行php文件，在php文件上，我刚刚回显了要测试的变量，但是php文件没有运行，为什么会这样？更新后的代码本身没有达到预期的目标，或者没有将lat/lng详细信息发送到后端脚本。假设您随后依赖于用户提交（或通过js）一个表单，该表单的操作设置为处理数据库插入的php脚本？？我提供了一个合理的解决方案，不需要进一步的用户交互，也不需要重新加载页面，但你走了一条不同的路线。。。顺便说一句，我在上面的答案中输入的PHP代码并不是实际的代码-它本身什么都不做-没有输出我的代码在表单中供用户提交，所以它可以工作，谢谢你的回答。代码运行得很好，但我不确定哪部分是PHP变量，您能澄清一下吗？在PHP脚本中，在ajax函数中标识为
url
，您应该可以访问POST数组。在该POST数组中，您应该可以找到
$\u POST['lat']
和
$\u POST['lng']
——它们对应于javascript
参数
object.RamRaider中指定的属性名称。我看到了，我将其添加到了我的代码中，它运行html文件，但不运行php文件，在php文件上，我刚刚回显了要测试的变量，但是php文件没有运行，为什么会这样？更新后的代码本身没有达到预期的目标，或者没有将lat/lng详细信息发送到后端脚本。假设您随后依赖于用户提交（或通过js）一个表单，该表单的操作设置为处理数据库插入的php脚本？？我提供了一个合理的解决方案，不需要进一步的用户交互，也不需要重新加载页面，但你走了一条不同的路线。。。顺便说一句，我在上面的答案中输入的PHP代码并不是真正的代码-