Ajax変数の値を別のページのhtml要素に渡す

Question

phpのクエリからデータを渡し、その結果をajaxメソッドを使って設定するにはどうすればいいですか？

  <p id ="resultFromFile1" name = "results">No Results</p> 

多くのスタックオーバーフロー：

<script type = "text/javascript"> 
    function myAjax() { 
     $.ajax({ type : 'POST', 
      data : { }, 
      url : 'query.php', 
      success: function (data) { 
      $doc = new DomDocument(); 
      $doc->Load('file2.php'); 
      $element = $doc->getElementById('resultFromFile1'); 

      }, 
      error: function (xhr) { 
      alert("error"); 
      } 
     }); 
    } 
</script> 

私は、PHPファイルfile2.phpで、このHTML要素に内容を入れたい：ここに は、私がこれまでfile1.phpというファイルにしたものです投稿は役に立たなかった。誰かが私を正しい方向に向けることができますか？

Answer 1

これは間違ったアプローチです。 あなたはかなりのデータベースと、その後file2.php負荷DBからこのデータは、すべてのない直接アップデートファイル

Answer 2

まずにquery.php返しているコンテンツの種類を言わせてのあなたのAjaxのリクエストデータが保存されますPHPスクリプトを作成する必要があります？それはJSONオブジェクトですか、単に出力を文字列として "エコー"していますか？

次の質問：jQuery、AngularJSなどをその方向に使用していますか？

は通常、あなたが何をしたいのか、あなたの実際の問題に今すぐ「query.php」から情報を取得し、JSON形式のAjaxの結果としてそれを渡す...

です：あなたは、要素が呼び出さ取得したいです"resultFromFile1"はfile2.phpの中にありますが、 "可視範囲"に何も追加していません。なぜなら、Loadはコンテンツを読み込むだけなので、あなたの "file2"を保持する要素を定義する要素にコンテンツを追加しないからです。 php "この問題をすべて回避するには、ビューにデータを表示するためにAngularJSを使用し、ng-includeを使用して「結果」テンプレートをインクルードし、Ajaxにドキュメントを埋め込ませます。

問題を解決するには：

<script type = "text/javascript"> 
// Your Solution 
function myAjax() { 
    $.ajax({ type : 'POST', 
     data : { }, 
     url : 'query.php', 
     success: function (data) { 
     $doc = new DomDocument(); 
     $doc->Load('file2.php'); 
     $element = $doc->getElementById('resultFromFile1'); 
     }, 
     error: function (xhr) { 
     alert("error"); 
     } 
    }); 
} 

// My Solution for this problem using native js 

// Load the "file2" contents in to the file2Holder element 
LoadUrlToElement('file2.php','file2Holder',function(data){ 

    /* When the first loading of file2.php is done, load the results from the query.php and put it in to the element called "resultFromFile1" which we just loaded and placed in to the dom before. But i would recommend you to use AngularJS to avoid this Callback hell and get many cool features that webdevelopers don't want to miss these days.... */ 

    LoadUrlToElement('query.php','resultFromFile1',function(){ 
     alert('Content of resultFromFile1 is => '+document.getElementById('resultFromFile1')); 
    }); 
}); 

function LoadUrlToElement(url,elementID,done) { 
    $.ajax({ type : 'POST', 
     data : { }, 
     url : url, 
     success: function (data) { 
      if(document.getElementById(elementID) === undefined){ 
      alert("Can't proceed cause the content holder"+elementID+" is not found"); 
       return; // Abort here cause there is no container with this id... 
      } 
      document.getElementById(elementID).html = data; 
      if(done !== undefined && typeof done === 'function') done(data); 
     }, 
     error: function (xhr) { 
     alert("error"); 
     } 
    }); 
} 
</script> 
<div id="file2Holder"></div>