PHPをjQueryと非同期に読み込むことはできますか？

Question

私は、ユーザーが要求したときapi.php 今すぐview.php?id=xyz要求のようないくつかのファイルがapi.php?id=xyzに送られ、一部のデータがフェッチされ、これがページを偶然にもview.php

に表示され、別のPHPページを含んでPHPページview.phpを持っていますapi.phpがリモートサーバーから一部のデータを要求するため、負荷時間が大幅に増加します。

view.php全体を読み込んだ後、ボタンをクリックしてapi.phpをクリックすることは可能ですか？

ここで私が何をしたいです：

view.php

<?php 
// Load Some Content 
echo '<div class="click">Click Here</div>'; 
// Don't Load The Following Div Unless User Clicks The Above Div 
echo '<div class="load">'; 
include 'api.php'; 
echo '</div>'; 
// Load Some Content 
?> 

私はロードapi.phpせずに全体view.phpをロードしたいが、それはview.phpにしてClick Here上のユーザーがクリック後に含めるべきですdivをロードする必要がありますapi.php

Answer 1

データを非同期で要求するには、AJAXリクエストが必要ですapi.phpから。 、JSを使用して次に

<div class="click" onclick="fetch">Click Here</div> 
<div id="load"></div> 

api.phpリソースからデータを取得：私は出力にこのような単純なフォームを、私のview.phpファイルを変更します。

<script> 
    function fetch(){ 
     var request = new XMLHttpRequest(); 
     request.open('GET', 'api.php', true); 

     request.onload = function() { 
      if (request.status >= 200 && request.status < 400) { 
       //assuming response from api.php is html 
       document.getElementById('load').innerHTML = request.responseText; 
      } 
     }; 

     request.send(); 
    } 
</script> 

Answer 2

以下のAJAXスクリプトを使用して処理することができます。 jqueryライブラリをインクルードして作業する必要があります。

$.ajax({ 
    url: "api.php", 
    type: "post", 
    data: {id:xyz}, 
    success: function (response) { 
     // you will get response from your php page (what you echo or print) 
     $('#divid').html(response); 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { 
     console.log(textStatus, errorThrown); 
    } 
}); 

Answer 3

api.phpからデータをロードするためにAjaxを使用できます。

view.php

<?php 
// Load Some Content 
echo '<div class="click" onclick="getData()">Click Here</div>'; 
// Don't Load The Following Div Unless User Clicks The Above Div 
echo '<div class="load" id="loadFromApi">'; 
echo '</div>'; 
echo '<script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>'; 
echo '<script>'; 
echo 'function getData(){'; 
echo '$("#loadFromApi").load("api.php");'; 
echo '}'; 
echo '</script>'; 
// Load Some Content 
?>