Question

我想在我的目标网页上创建一个获取用户位置并计算最近商店的功能并在页面上显示..我使用此代码计算..

var cities = [
     ["city1", 10, 50, "blah"],
     ["city2", 40, 60, "blah"],
     ["city3", 25, 10, "blah"],
];

function NearestCity(latitude, longitude) {
    var mindif = 99999;
    var closest;

for (index = 0; index < cities.length; ++index) {
    var dif = PythagorasEquirectangular(latitude, longitude, cities[index][1], cities[index][2]);
    if (dif < mindif) {
    closest = index;
    mindif = dif;
  }
}

    alert(cities[closest]);
}

如何将结果传递给php并存储到db？

Answer 1

要传递来自NearestCity函数的数据，您通常会使用ajax - 根据您自己的偏好，请求可以是同一页面或另一页面。下面显示了如何将数据发送到PHP代码使用的同一页面 - 在这种情况下，它不会将信息保存到数据库，但它可以非常轻松地完成。

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();

        /* read and process ajax post request - available through the "$_POST" array */

        /* add to db or whatever */

        /* 
            send response to ajax callback
            Here it is just a simple output showing the data that was sent via POST
            but should be more meaningful ~ perhaps db results or html content etc
        */
        echo implode( PHP_EOL, $_POST );

        exit();
    }
?>
<!doctype html>
<html>
    <head>
        <title>Find nearest - send via ajax to same page</title>
        <script>
            var defaults={
                lat:52.628593, 
                lng:1.296380
            };

            var cities = [
                 ['Aylsham', 52.794847, 1.252565, 'Aylsham is a historic market town and civil parish on the River Bure in north Norfolk, England'],
                 ['North Walsham', 52.823477, 1.390931, 'North Walsham is a market town and civil parish in Norfolk, England within the North Norfolk district'],
                 ['Dereham', 52.681311, 0.939737, 'Dereham, also known as East Dereham, is a town and civil parish in the English county of Norfolk'],
                 ['Cambridge',52.204548, 0.124404,'Cambridge is a city on the River Cam in eastern England, home to the prestigious University of Cambridge, dating to 1209'],
                 ['Swanton Morley',52.714710, 0.986908,'Swanton Morley is a village and civil parish situated in the English county of Norfolk']
            ];

            function Deg2Rad(deg) {
              return deg * Math.PI / 180;
            }

            function PythagorasEquirectangular(lat1, lon1, lat2, lon2) {
              lat1 = Deg2Rad(lat1);
              lat2 = Deg2Rad(lat2);
              lon1 = Deg2Rad(lon1);
              lon2 = Deg2Rad(lon2);
              var R = 6371; // km
              var x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2);
              var y = (lat2 - lat1);
              var d = Math.sqrt(x * x + y * y) * R;
              return d;
            }

            function NearestCity( _latitude, _longitude ) {
                var mindif = 99999;
                var closest;
                var tmp=[];

                console.info('Find nearest city based upon lat:%s and lng:%s',_latitude, _longitude);

                for ( var i=0; i < cities.length; i++ ) {
                    var _lat=cities[i][1];
                    var _lng=cities[i][2];

                    var difference = PythagorasEquirectangular( _latitude, _longitude, _lat, _lng );

                    if( difference < mindif ) {
                        closest = i;
                        mindif = difference;
                        tmp.push( cities[ i ] );
                    }
                }

                /* send request to the same page! */
                ajax.call( this, location.href, tmp, cbNearestCity );
            }

            function ajax( url, params, callback ){
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if( xhr.readyState==4 && xhr.status==200 ){
                        callback.call( this, this.response );
                    }
                };
                var payload=[];
                for( var n in params )payload.push( params[n][0]+'='+params[n] );

                xhr.open( 'post', url, true );
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
                xhr.send( payload.join('&') );
            }

            function cbNearestCity(response){
                document.getElementById('results').innerHTML=response;
            }



            document.addEventListener('DOMContentLoaded',function(e){
                if( navigator.geolocation ){
                    navigator.geolocation.getCurrentPosition( function( pos ){
                        NearestCity.call( this, pos.coords.latitude, pos.coords.longitude );
                    });
                } else {
                    NearestCity.call( this, defaults.lat, defaults.lng );
                }
            },{ capture:false, passive:true } );
        </script>
    </head>
    <body>
        <h1>Find nearest city - using geolocation on page load</h1>
        <pre id='results'></pre>
    </body>
</html>

Answer 2

您可以使用AJAX进行前端和后端之间的通信。检查this MDN guide是否有AJAX。

此外，您可以查看this SO question以及标记为ajax的众多问题，以了解详情。

Answer 3

所以你的标题是 - 将数据从javascript传递到同一页面中的php

如果有可能Web开发已经改变了很多。 Javascript是一种客户端编程语言。和php是一种服务器端编程语言。

如果不重新加载，则无法在同一页面中将数据传递给php。

你将不得不使用ajax将数据传递给php，但为此你必须制作不同的php页面，而不是在同一页面。

But if you still wants to pass data from javascript to the same page, you will have to reload the page.
- pass data to the hidden field
- by javascript automatically post the form
- page will reload and you will get the result in $_POST in a same page
(but not a good way.)

Answer 4

您需要向PHP页面发出AJAX请求。

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "abc.php", true);
  xhttp.send("mindif="+mindif+"&&closest="+closest);

计算完值后，将其添加到函数末尾。快速参考 - Ajax Javascript

Answer 5

计算后，您可以通过ajax请求发送数据：

$.ajax({
    method: "POST",
    url: "some.php",
   data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
   alert( "Data Saved: " + msg );
});

click here for more detail

将数据从javascript传递到同一页面中的php

5 个答案: