Question

我有一个index.php该文件包含顶部的php，然后是html，最后是javascript。在我的javascript部分，我从我的php部分获取值如下：

var lati = <?php echo $valLat; ?>; var longi = <?php echo $valLong; ?>;

我使用lati和longi来更新地图上的标记。

如何使用javascript调用我的代码的php部分以获得最新的经度和经度，而无需更新网页？

这是我当前的PHP代码，但是我必须重新加载整个页面以获得新的纬度和经度。

`

/* This part will select GPS_data database and it will get the most recent latitude and longitude values
   these values are constantly updated in the database by a python file*/

//Selects GPS_data database.
mysql_select_db("GPS_data");

$sql = mysql_query("SELECT * FROM coordinates ORDER BY time DESC LIMIT 1"); //Gets the most recent lat and long.

$latitude = 'latitude';    //Set $latitude variable the same as the most recent latitude on the table.
$longitude = 'longitude';

$rows = mysql_fetch_assoc($sql);
$valLat = $rows['latitude'];
$valLong = $rows['longitude']; ?>

Answer 1

需要对PHP文件进行少量更改，再加上一些jQuery来检索lat / lon。

的变化：

向PHP代码添加了一个数组$data。
将lat和lon作为关联数组的元素存储到$data。
将PHP数组转换为对象usig json_encode。
最后使用echo，现在$data将在jQuery中作为对象使用。

以下是您修改后的PHP文件。

<? 
// fetch_latlon.php

/* This part will select GPS_data database and it will get the most recent latitude and longitude values
   these values are constantly updated in the database by a python file*/

//Selects GPS_data database.
mysql_select_db("GPS_data");

$sql = mysql_query("SELECT * FROM coordinates ORDER BY time DESC LIMIT 1"); //Gets the most recent lat and long.

$latitude = 'latitude';    //Set $latitude variable the same as the most recent latitude on the table.
$longitude = 'longitude';

$rows = mysql_fetch_assoc($sql);
$valLat = $rows['latitude'];
$valLong = $rows['longitude']; 

// I have added this
$data = [
    'lat' => $valLat,
    'lon' => $valLong
];

echo json_encode($data);

?>

然后在HTML添加AJAX代码。

<script>

function updateLatLon() {

    $.ajax({
        // name of file to call
        url: 'fetch_latlon.php',

        // method used to call server-side code, this could be GET or POST
        type: 'GET'

        // Optional - parameters to pass to server-side code
        data: {
            key1: 'value1',
            key2: 'value2',
            key3: 'value3'
        },

       // return type of response from server-side code
       dataType: "json"

        // executes when AJAX call succeeds
        success: function(data) {
            // fetch lat/lon
            var lat = data.lat;
            var lon = data.lon;

            // show lat/lon in HTML
            $('#lat').text(lat);
            $('#lon').text(lon);
        },

        // executes when AJAX call fails
        error: function() {
            // TODO: do error handling here
            console.log('An error has occurred while fetching lat/lon.');
        }
    });

}

// fetch lat/lon after each 3000 milliseconds
setTimeout(updateLatLon, 3000);

</script>

附注：将MySQL代码转换为MySQLi，因为MySQL已弃用。

有关此次转换的帮助，请访问https://www.phpclasses.org/blog/package/9199/post/3-Smoothly-Migrate-your-PHP-Code-using-the-Old-MySQL-extension-to-MySQLi.html#convert

<强>更新

已解决 Uncaught ReferenceError: $ is not defined

首先，您需要确保加载了jQuery脚本。这可能来自您的网站上的CDN或本地。如果在尝试使用jQuery之前没有先加载它，它会告诉你jQuery没有定义。

<script src="jquery.min.js"></script>

这可以在HEAD或页面的页脚中，只需确保在尝试调用任何其他jQuery内容之前加载它。

然后您需要使用以下两种解决方案之一

(function($){
// your standard jquery code goes here with $ prefix
// best used inside a page with inline code, 
// or outside the document ready, enter code here
 })(jQuery);

或

jQuery(document).ready(function($){
// standard on load code goes here with $ prefix
// note: the $ is setup inside the anonymous function of the ready command
});

请注意，以下代码无法使用，尤其是在WordPress的情况下。

$(document).ready(function(){
    //code here
});

Answer 2

您可以在代码中使用setTimeout javascript函数，并使用ajax调用来重新加载所需的变量。例如，您可以使用jQuery get函数来执行ajax调用。

如何自动继续运行index.php的php部分？

2 个答案: