javascript - 使用ajax将地理定位添加到数据库

Question

通常在数据库查询之后我会回显一个表，在最后一列我添加这样的东西，所以当单击 href 时我可以运行一些 php 来获取行 ID 然后我可以操作该行。

echo '<td><a href="driver-accept-job.php?id=' . $row['booking_id'] . ' "class="btn btn-primary btn-block" "    " onclick="return confirm(\'Are you sure you want to accept this job?\')" >Accept Job</a></td>';

现在我想在用户单击“接受工作”时将地理定位数据刻录到数据库，(如果用户拒绝地理定位提示则将无法接受工作)因为地理定位是 js，我相信我现在必须使用 ajax 来发送经纬度和 booking_id 。我不知道如何获取 $row['booking_id'] 并将其传递给 js。

这就是我目前所拥有的......

echo '<td><button class="btn btn-primary btn-block" onclick="getLocation()" >Accept Job</button></td>';

<script>

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; 

    $.ajax({  
    type: 'POST',
    url: 'driver-accept-job.php', 
    data: { id: booking_id, latitude: position.coords.latitude, longitude: position.coords.longitude },
    success: function(response) {
        content.html(response);
    }
});

}

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;
    }
}
</script>

driver-accept-job.php

$id = $_POST['id'];
$latitude = $_POST['latitude'];
$longitude = $_POST['longitude'];

Answer 1

您与当前代码非常接近。您可以将作业 ID 作为数据元素添加到现有按钮中，然后如果您在 onclick="getLocation()" 的括号之间添加 this，您可以检索它在你的javascript中。所以这个:

echo '<td><button class="btn btn-primary btn-block" onclick="getLocation()" >Accept Job</button></td>';

变成这样:

echo '<td><button class="btn btn-primary btn-block" data-jobid="' . $row['booking_id'] . '" onclick="getLocation(this)" >Accept Job</button></td>';

现在在函数外部声明您的 booking_id 变量，以便全局访问它，就像您对 var x 所做的那样

var booking_id;

现在改变这个

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);

对此

function getLocation(param) {
    if (navigator.geolocation) {
        booking_id = $(param).data('jobid');
        navigator.geolocation.getCurrentPosition(showPosition, showError);

点击按钮现在会将 booking_id 变量设置为该按钮的作业 ID。您已经将其包含在 showPosition 函数中的 ajax 调用中，因此由于它现在可以在全局范围内访问，因此您的其余代码无需修改即可工作