Javascript 数据库IP中每个用户位置的打印标记

我的数据库中有一个存储ip地址的用户表。 我有一个获取用户纬度和经度的api

首先，我需要让每一个用户长时间地使用语言

目前，我的代码只返回数据库的lang和long中的最后一个用户

这是我尝试返回每个客户机long和langs的代码：

$user_grab = mysqli_query($con, "SELECT * FROM users");
while($users_ = mysqli_fetch_array($user_grab)) {

$username_   = $users_['username'];
$client_ip   = $users_['ip'];

//This is for getting each users location on our map
$ip               = $client_ip;
$geocode          = file_get_contents("http://freegeoip.net/json/{$ip}");
$output           = json_decode($geocode);
$client_latitude  = $output->latitude;
$client_longitude = $output->longitude;

}

然后，我使用以下命令将其返回到我的PHP主页：

$response = array('client_latitude'=>$client_latitude,'client_longitude'=>$client_longitude); 
echo json_encode($response);

我使用以下JS/JQUERY代码接收AJAX请求：

    <script>
    function fetchOnline() {
        $.ajax({
            url: "includes/get_dash_settings.php",
            context: document.body,
            type: 'POST',
            data: {get_data:true},
            success: function(value) {
                var data = JSON.parse(value);
                $('#lat').html(data['client_latitude']);
                $('#long').html(data['client_longitude']);
            },
            complete:function(){
               setTimeout(fetchOnline,5000);
            }
        })
    }

    $(document).ready(function() { setInterval(fetchOnline,5000); });
</script>

---

因为您希望返回一组坐标，所以以数组的形式返回它们是有意义的。您当前只获取最后一个，因为您正在覆盖这些值。创建一个条目，然后将该条目作为数组项添加到响应中。您可以轻松地创建带有

[]

后缀的新数组项

$response[]=$x

将向包含

$x

的

$response

添加一个数组项

$user_grab = mysqli_query($con, "SELECT * FROM users");

$response = [];

while($users_ = mysqli_fetch_array($user_grab)) {
    $client_ip   = $users_['ip'];

    //This is for getting each users location on our map
    $ip               = $client_ip;
    $geocode          = file_get_contents("http://freegeoip.net/json/{$ip}");
    $output           = json_decode($geocode);
    $client_latitude  = $output->latitude;
    $client_longitude = $output->longitude;

    $response[] = [
        'client_latitude' => $client_latitude,
        'client_longitude' => $client_longitude
    ];
}

echo json_encode($response);

显然，您也需要更改javascript，因为它当前希望返回一个带有两个键的对象，但现在您得到了一个对象数组

<script>
    function fetchOnline() {
        $.ajax({
            url: "includes/get_dash_settings.php",
            context: document.body,
            type: 'POST',
            data: {get_data:true},
            success: function(value) {
                const data = JSON.parse(value);
                const $parent = $('#all-the-coordinates');
                for (const row of data) {
                    const $element = $('<span></span>');
                    $element.text(`${row['client_latitude']}, ${row['client_longitude']}`);
                    $parent.append($element);
                }
            }
        })
    }

    $(document).ready(function() { setInterval(fetchOnline, 5000); });
</script>

函数fetchOnline（）{
$.ajax({
url:“includes/get\u dash\u settings.php”，
上下文：document.body，
键入：“POST”，
数据：{get_data:true}，
成功：功能（价值）{
const data=JSON.parse（值）；
const$parent=$（“#所有坐标”）；
for（数据的常量行）{
常量$element=$（''）；
$element.text（`${row['client_latitude']}，${row['client_latitude']}`）；
$parent.append（$element）；
}
}
})
}
$（document）.ready（函数（）{setInterval（fetchOnline，5000）；}）；

在html中使用

<div id="all-the-coordinates"></div>

尝试更改

$client\u ip=$users\u['ip']至
$client_ip[]=$users_['ip']
因为你想要一个数组来容纳它们。@Codesee感谢你的快速回复，但这使我的AJAX无法加载atol。如果我是你，我不应该太相信freegeoip返回的结果-它告诉我我在美国加利福尼亚州的El Segundo（我在英国）因此，其他用户可能也会出现在奇怪的位置，比如使用内置于浏览器中的
navigator.geology
，并使用ip作为后备…并将位置存储在db中。每次加载页面时，将每个用户发送到该api时，您都会遇到使用限制，更不用说加载时间了。谢谢，但当我使用此功能时，我的主PHP页面上的信息将不会加载。当我使用$response=array（）时，确实如此。很明显，您也需要更改javascript函数，但我让您循环返回的数组，并对其执行任何需要的操作。我不太确定您的意思。你能给我一个起点吗？@Sumurai8它仍然不能与那个代码伙伴合作。这个代码
$response=[]显示：语法错误，意外“[”
<script>
    function fetchOnline() {
        $.ajax({
            url: "includes/get_dash_settings.php",
            context: document.body,
            type: 'POST',
            data: {get_data:true},
            success: function(value) {
                const data = JSON.parse(value);
                const $parent = $('#all-the-coordinates');
                for (const row of data) {
                    const $element = $('<span></span>');
                    $element.text(`${row['client_latitude']}, ${row['client_longitude']}`);
                    $parent.append($element);
                }
            }
        })
    }

    $(document).ready(function() { setInterval(fetchOnline, 5000); });
</script>

<div id="all-the-coordinates"></div>