0

HTMLページに次のものがあります。

<script type="text/javascript">
setInterval(function(){refresh()},5000);
function refresh()
{
    $.post("test.php",
    {
           // nothing here             
    },
    function(data, textStatus)
    {      

      $('' + data + '').find('.maindiv').each(function () {
      $('.maindiv').replaceWith('.maindiv');
      });

    });  
}
</script>

<div id = "1" class= "maindiv">
<div sid= "1" class= "subdiv">old sub div content</div>
<div cid= "1" class= "childdiv">another old sub div</div>
<img id = "1" src="http://foo.com/bar.png"/>  
</div>

<div id = "2" class= "maindiv">
<div sid= "2" class= "subdiv">this content is old</div>
<div cid= "2" class= "childdiv">please update me!</div>
<img id= "2" src="http://foo.com/bar.png"/>  
</div>

要素を更新するために呼び出される PHP ページ (test.php):

<?php

 echo '<div id = "1" class= "maindiv">
       <div sid= "1" class= "subdiv">this is new sub div</div>
       <div cid= "1" class= "childdiv">this is also new sub div content</div>
       <img id= "1" src="http://foo.com/bar.png"/>  
       </div>'; 

 echo '<div id = "2" class= "maindiv">
       <div sid= "2" class= "subdiv">new content</div>
       <div cid= "2" class= "childdiv">new content for this child div</div>
       <img id= "2" src="http://foo.com/bar.png"/>  
       </div>'; 
?>

これら 2 つの要素は、HTML ページにも存在します。基本的に、PHPページと呼び、PHPページからそれらの要素を取得し、HTMLページの応答でそれらをループし、各maindiv（すべての子要素を含む）をHTMLページの対応するものに置き換えます。

これは非常に基本的な例です。これらの要素のコンテンツが変更され、ライブ更新のように要素を置き換えたいため、これを行います。

私が投稿している関数には応答がないようですので、これを達成する方法がわかりません。

前もって感謝します

4

2 に答える 2

1

maindiv新しい要素と一致するように、ページ内の要素にインデックスを付ける必要があります。

また、交換するものを変更する必要があります

 $(data ).filter('.maindiv').each(function (index) {/* filter or find depends on html structure sent*/
      /* "this" is the current div in response*/          
      $('#'+this.id).replaceWith(this);
});

eachを追跡しindex、eq()ページ内の同じインデックスを照合するために使用されます。

編集:出力のみが出力のルートにある DIV である場合にも変更find()しますfilter()

于 2013-02-08T02:22:57.593 に答える
0

ポーリングするコンテンツを囲む1つのdivがないのはなぜですか。その後、ajax応答を受信したら、ブロック全体を次のように置き換えます。html()

<?php 
//check for ajax and return
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
    header('Content-Type: text/html');

    $response = '
    <div id = "a" class= "maindiv">
       <div sid= "1" class= "subdiv">'.date("D M j G:i:s T Y").'</div>
       <div cid= "1" class= "childdiv">'.md5(time()).'</div>
       <img id= "1" src="http://foo.com/bar.png"/>  
    </div>
    <div id = "a" class= "maindiv">
       <div sid= "1" class= "subdiv">'.date("D M j G:i:s T Y").'</div>
       <div cid= "1" class= "childdiv">'.md5(time()+1).'</div>
       <img id= "1" src="http://foo.com/bar.png"/>  
    </div>'; 

    echo $response;
    die;
}
?>

<script type="text/javascript">
function poll(){
    setTimeout(function(){
        $.ajax({ url: "./test.php", cache: false,
        success: function(data){
            $("#polling").html( data );
            poll();
        }});
    }, 5000);
}
$(document).ready(function(){
    poll();
});
</script>


<div id = "polling" class= "maindiv">
    <!--New response will replace the below html-->
    <div id = "1" class= "maindiv">
    <div sid= "1" class= "subdiv">old sub div content</div>
    <div cid= "1" class= "childdiv">another old sub div</div>
    <img id = "1" src="http://foo.com/bar.png"/>  
    </div>

    <div id = "2" class= "maindiv">
    <div sid= "2" class= "subdiv">this content is old</div>
    <div cid= "2" class= "childdiv">please update me!</div>
    <img id= "2" src="http://foo.com/bar.png"/>  
    </div> 

</div>

編集

jsonを返し、idに基づいて応答をdivにループすることもできます。例を次に示します。

<?php 
//check for ajax and return
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
    header('Content-Type: application/json');

    $response = array(
    'block_a'=>'content for block a (last_updated:)'.date("D M j G:i:s T Y"),
    'block_b'=>'content for block b (last_updated:)'.date("D M j G:i:s T Y"),
    'block_c'=>'content for block c (last_updated:)'.date("D M j G:i:s T Y"),
    'block_d'=>'content for block d (last_updated:)'.date("D M j G:i:s T Y"),
    'block_e'=>'content for block e (last_updated:)'.date("D M j G:i:s T Y"),
    ); 

    echo json_encode($response);
    die;
}
?>


<script type="text/javascript">
function poll(){
    setTimeout(function(){
        $.ajax({ url: "./test.php", cache: false,
        success: function(data){
            $.each(data, function(k, v) {
                //key value place html blocks
                $("#"+k).html(v);
            });
            poll();
        }, dataType: "json"});
    }, 1000);
}

$(document).ready(function(){
    poll();
});
</script>


<div id = "block_a" class= "maindiv"></div>
<div id = "block_b" class= "maindiv"></div>
<div id = "block_c" class= "maindiv"></div>
<div id = "block_d" class= "maindiv"></div>
<div id = "block_e" class= "maindiv"></div>

$responseこのようにして、各ポーリングで置き換えたいコンテンツのみを使用してビルドできます。

于 2013-02-08T02:36:04.397 に答える