2017-03-24 24 views
-1

Webサイトを実行しているメインのhtmlファイルから非常に簡単なPHP呼び出しをしようとしています。私は旅行時間を計算するためにGoogleのAPIを使用する次のPHPファイルを持っています。AJAXを使用してPHP関数を呼び出す方法

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を呼び出し、それがWebページ上に表示される情報をエコー。私はPHPスクリプトを約10分ごとに呼び出すことができるように、これをどのように変更できるのだろうと思っています。そのため、旅行時間は最新のままで、トラフィックによって変化します。私はAJAXを使用しなければならないことを知っていますが、私はそれをどのように呼び出すことができ、HTMLコードで表示するために情報をエコーバックするのか混乱しています。

おかげ

+0

[ページの一部を自動更新する方法](http://stackoverflow.com/questions/7660528/how-to-auto-refresh-a-section) -of-a-page) – billynoah

答えて

1

使用jqueryのAJAX()のような:

$(document).ready(function(){ 
    $.ajax({ 
     url: 'travelTime.php',       
     type: 'get',         
     data: { 
      var1 :val1, // key value pair of variable : value 
     }, 
     success: function(response){ 
      // Put the response to respective html 
      $('#distance').html(); 
     } 
    }); 
}); 

<h2 id="distance"></h2> 

そして、すべてのX分、それを呼び出す:jqueryのが含まれていない場合、あなたはエラー 使用を取得します

setInterval(function() { 
    //your jQuery ajax code 
}, 1000 * 60 * X); // where X is your every X minutes 
+0

travelTime.phpファイルを編集する必要がありますか? – user2817437

+0

いいえそれはうまく動作します –

+0

私のWebページに表示されていません。私がこれらの変更を行うと、まったく表示されません。私はjquery ajaxをに入れました。 – user2817437

0

この最初に

<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> 

その後、F12をクリックして、コンソールをクリックして更新します。 ここにコメントしてください。

+0

こんにちは、私はコンソールで "Success Response"を返すようにしました。私はHTMLでその情報をどのように表示するのだろうかと思っています。 #distance変数を呼び出しますか?ありがとう – user2817437

関連する問題