Javascript 如何使用AJAX调用PHP函数_Javascript_Php_Jquery_Html_Ajax

Javascript 如何使用AJAX调用PHP函数

javascript php jquery html ajax

Javascript 如何使用AJAX调用PHP函数,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我试图从运行该网站的主html文件中进行一个非常简单的PHP调用。我有下面的PHP文件，它使用Google的API来计算旅行时间 travelTime.php $travelDetails = "https://maps.googleapis.com/maps/api/distancematrix/json?origins...; $json = file_get_contents($travelDetails); $details = json_decode($json, TRUE);

我试图从运行该网站的主html文件中进行一个非常简单的PHP调用。我有下面的PHP文件，它使用Google的API来计算旅行时间

travelTime.php

$travelDetails = "https://maps.googleapis.com/maps/api/distancematrix/json?origins...;

$json = file_get_contents($travelDetails);

$details = json_decode($json, TRUE);

$time = $details['rows'][0]['elements'][0]['duration']['text'];

echo "Your current travel time is $time";

这计算了从我家到工作的旅行时间，我使用HTML代码主体中的以下代码将其显示在网站上。这个文件名为info.php，它运行html代码和整个网站

info.php

<body>

<h2><?php include 'travelTime.php'?></h2>

</body>

这将调用travelTime.php，并与网页上显示的信息相呼应。我想知道我如何才能改变这一点，这样我可以有PHP脚本调用约每10分钟，使旅行时间保持最新，并与交通变化。我知道我必须使用AJAX，但我不知道如何调用它并将这些信息返回到HTML代码中显示

感谢使用jquery ajax（），如：

如果jquery不包括在内，那么您将得到错误消息先用这个

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

然后

<script>
$(document).ready(function(){
    $.ajax({
        url: 'travelTime.php',                        
        type: 'get',                                  
        data: {},
        success: function(response){
            console.log("Success  Response",response);
            $('#distance').html();
        },error:function(response){
            console.log("Error response",response);
            console.log("Error response Text",response.responseText);
        }
    });
});
</script>


$（文档）.ready（函数（）{
$.ajax({
url:'travelTime.php'，
键入：“get”，
数据：{}，
成功：功能（响应）{
console.log（“成功响应”，响应）；
$（'#distance'）.html（）；
}，错误：函数（响应）{
日志（“错误响应”，响应）；
log（“错误响应文本”，response.responseText）；
}
});
});

如果仍然卡住，请单击f12，然后单击控制台并刷新。

然后在这里评论你得到了什么

我的网页上可能没有显示它的副本。当我做出这些改变时，它根本就不会出现。我把jQueryAjax放进去了。嗨，我在控制台中得到了“成功响应”。我只是想知道如何在HTML中显示这些信息？我要称之为#距离变量吗？谢谢

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

<script>
$(document).ready(function(){
    $.ajax({
        url: 'travelTime.php',                        
        type: 'get',                                  
        data: {},
        success: function(response){
            console.log("Success  Response",response);
            $('#distance').html();
        },error:function(response){
            console.log("Error response",response);
            console.log("Error response Text",response.responseText);
        }
    });
});
</script>