ajax를 사용하여 새로 고침하고 양식 데이터를 유지하는 방법

Question

저는 실시간 토론 양식을 작성 중입니다. 이 페이지는 MySQL에서 스레드를로드하고 4 초마다 AJAX를 통해 새로 고칩니다. 각 스레드에 대한 마지막 코멘트 다음에는 댓글 용 텍스트 입력이 있습니다 (Facebook과 매우 유사합니다).

사용자가 입력 내용을 쓰고 페이지를 새로 고치면 메시지가 사라진다는 점을 제외하면 모든 것이 잘 작동합니다. 보안 및 개인 정보 보호가이 프로젝트의 주된 목표이기 때문에 쿠키를 사용하고 싶지 않습니다. 많은 솔루션을 시도해 보았지만 몇 시간 동안 솔루션을 검색했지만 아무 것도 작동하지 않는 것 같습니다.

1. 페이지가 새로 고침 될 때마다 $_post에 가능한 해결책이 있습니까?
2. 입력 된 값을 캐싱하고 $_session 또는 로컬 저장소에서 검색하는 경우 누구나 더 구체적인 접근 방식을 제안 할 수 있습니까? 즉 : 리스너를 넣을 위치 :
3. 입력 값이 ""과 다르지만 페이지가 다시로드되지 않도록하는 기능을 만들려고했지만 나에게 적합하지 않습니다.

여기 내 새로 고침 코드 :

<script type="text/javascript"> 
    var PHP = "msgboard.php"; 

    function updateShouts(){ 
     $('#msgboard').load(PHP);  
    } 

    window.setInterval("updateShouts()", 4000); 
</script> 

그리고 여기에 주요 PHP 함수이다 : 사전에

while($row = mysql_fetch_array($resultados)) { 

    echo '<div class="post"> 
      <div class="user"><b>'.$row["user"].'</b></div>'; 
    echo ' <div class="txt">'.$row["msg1"].'</div> 
      </div>'; 

     $sql2="SELECT * FROM table WHERE masterid = '".$row['id']."'ORDER BY id ASC"; 
     $resultados2 = mysql_query($sql2); 
     while($row2 = mysql_fetch_array($resultados2)) { 
      echo '<div class="comment"> 
        <div class="txt"><b>'.$row2['user'].'</b>'; 
      echo ' '.$row2['msg1'].'</div> 
        </div>'; 
     } 

    echo '<div class="commentform"> 
      <form action="board.php" method="post"> 
      <input type="text" size="75" name="message" id="message1"> 
      <input type="hidden" name="masterid" value="'.$row['id'].'"> 
      <input type="submit" name="Submit" value="Enviar"></form> 
     </div>' ; 
} 

감사합니다!

Answer 1

는 의견에서 지적, 당신은 단지 주석을 업데이트 할 경우에만 필요 페이지의 해당 부분을 업데이트하십시오.

1 단계 : 당신이 용기

당신은 모든 의견을 포함 할 코드의 새로운 사업부 <div id="comments_contaner"> 지금이 알에 업데이트를 타겟팅 할 수 있도록 의견에 컨테이너를 추가합니다.

또한 HTML을 출력 할 때 PHP 태그를 닫고 HTML에 PHP 변수를 넣어야하는 경우 <?= $variable ?>을 사용하는 것이 더 쉽습니다.

msgboard.php :

<? 
while($post = mysql_fetch_array($resultados)) 
{ 
?> 
    <div class="post"> 
     <div class="user"><b><?= $post["user"]?></b></div> 
     <div class="txt"><?= $post["msg1"]?></div> 
    </div> 
    <div id="comments_contaner"> 
<? 
    // This code can be ommited as you can just call updateShouts() upon page load to fetch the comments 
    $comments = mysql_query("SELECT * FROM table WHERE masterid = '{$post['id']}' ORDER BY id ASC"); 
    while($comment = mysql_fetch_array($comments)) 
    { 
?> 
     <div class="comment"> 
      <div class="txt"><b><?= $comment['user'] ?></b> <?= $comment['msg1'] ?></div> 
     </div> 
<? 
    } 
?> 
    </div> 
    <div class="commentform"> 
     <form action="board.php" method="post"> 
      <input type="text" size="75" name="message" id="message1"> 
      <input type="hidden" name="masterid" value="<?= $post['id'] ?>"> 
      <input type="submit" name="Submit" value="Enviar"> 
     </form> 
    </div> 
<? 
} 
?> 

단계 2 :

이 기능은 출력 의견, 그것은 매개 변수로 masterid가 필요합니다 코멘트 업데이트하는 PHP 함수를 만듭니다 출력 할 설명을 알고 있어야합니다.

updateComments.php :

<? 
    $masterid = $_GET['masterid'] 
    $comments = mysql_query("SELECT * FROM table WHERE masterid = '{$masterid}' ORDER BY id ASC"); 
    while($comment = mysql_fetch_array($comments)) 
    { 
?> 
     <div class="comment"> 
      <div class="txt"><b><?= $comment['user'] ?></b> <?= $comment['msg1'] ?></div> 
     </div> 
<? 
    } 
?> 

3 단계 : 당신은에서 매개 변수로 $row['id']에 합격해야합니다 컨테이너 사업부

타겟팅 스크립트에서 PHP 업데이트 함수를 호출 URL

<script type="text/javascript"> 
    var PHP = "updateComments.php?masterid=<?= $post['id']?>"; 

    function updateShouts(){ 
     $('#comments_contaner').load(PHP);  
    } 

    window.setInterval("updateShouts()", 4000); 
</script> 

PD :이 코드는 테스트하지 않았지만 주요 아이디어 만 보여줍니다.

편집 : 수정 된 변수 이름 및 설명이 추가되었습니다.

Answer 2

당신은 상태 기반 HTTP 연결을 조사해야합니다. 따라서 새 메시지가 서버 쪽 보드에 추가 될 때마다 모든 클라이언트에 알립니다. 이렇게하면 페이지를 불필요하게 새로 고칠 필요가 없습니다. HTML5는이를 가능하게하는 웹 소켓을 지원합니다. 여기에 내가 그 건너 온 일부 링크는 유용하게 사용할 수 있습니다 @aziz으로

Create Bi-directional connection to PHP Server using HTML5 Web Sockets Wikipedia Page on WebSocket

socketo.me