2016-08-12 11 views
0

私はウェブサイト上に表示された科学的出版物のリストを持っており、ユーザーが10個の出版物のリストの最後に到着すると追加のコンテンツをロードしたい、別の10の出版物を読み込む。PHPからのHTMLをエコーし​​てウェブページ上のajaxリクエストで表示する

私は、PHPスクリプトから-EDをエコーされたが、私は、HTMLを表示することはできませんhtmlコードを表示しようとしています次の10本の出版物

をロードするためのAjax呼び出しを行います。コンソールでは、自分のHTMLの値として「1」を取得しています。私は理解していません: 1.なぜ私は '1'の値を得ています。 2.また、javascriptで表示するHTMLをエコーするのは良い方法ですか?

JS(AJAXコール):

var resp = xmlhttp.responseText; 
    var respArray = resp.split('|'); 
    var response = respArray[1]; 
    var publicationList = respArray[0]; 

    var currentHTML = document.getElementById('showPubs').innerHTML; 

    if(response == '1'){ 
    console.log('more publications available'); 

     var currentHTML = document.getElementById('showPubs').innerHTML; 
     document.getElementById('showPubs').innerHTML += publicationList; 

     }else{ 
      document.getElementById('showPubs').innerHTML += '<div id="noMorePub">No more publications</div>'; 

    } 

PHP:

$recentPublications .= ' 
     <div id="pub'.$articleID.'" class="pub20"> 
      <div class="divImg">'.$avatarPathHTML.'</div> 
      <div class="contentPub"> 
       <div class="datepub"> 
        <div class="fullName"><a class="sfullNme" href="2profile.php?username='.$articleUsername.'">'.$fullname.'</a></div> 
        <div class="date">'.$submitDate.'</div> 
       </div> 
       <div class="divLink"> 
        <a href="testPage3.php?article='.$articleID.'" class="pubLink">'.$articleTitle.'</a> 
       </div> 
       <div class="authorString">'.$author_string.'</div> 
      </div> 
       <hr class="pubSeparator"> 
     </div> 
    '; 


echo $recentPublications.'|1'; 
+0

何をすべきかは、一種のページネーションです。あなたのURLにいくつかの '_GET'パラメータを呼び出して、それらを取得してあなたのクエリに入れてください(from、to)。このようにして、すべての読み込みページを実行するか、またはAjaxがわずか10個の結果で新しいクエリーを呼び出します。 HTMLをサーバー側のコードから分離するようにしてください。 – KubiRoazhon

答えて

0

良い練習が懸念を分離することです。したがって、あなたの例では、サーバー側スクリプトは表示するデータ(JSON経由など)のみを提供し、フロントエンドはAJAXを特定のエンドポイントに呼び出す必要があります。

1

私は良いアイデアは、あなただけの応答の長さを確認することができます

echo $recentPublications.'|1'; 

var respArray = resp.split('|'); 
    var response = respArray[1]; 
    var publicationList = respArray[0]; 
    if(response == '1'){ 

この汚いハックを使用していないと思います。応答の長さが0バイトの場合、他のパブリケーションは使用できません。

関連する問題