2016-07-19 20 views
-3

私はdivに「好き」と「嫌い」のアンカータグを含む記事を表示しています。ページ全体を更新しなくても、好き嫌いを感じたときにdivを更新したいと思います。ここでdivです:あなたは「like_box」と「dislike_box」と呼ばれるdivのを見れば、あなたがPHPスクリプトに好かれるアンカータグの内部を見ることができますPHPページを更新せずに更新する

#Print out article and display information 
echo "<article style='border: 2px solid #10466C;' class='topContent'> 
     <header> 
      <a class='article_title' href='article.php?article=$id'><h3>$title</h3></a> 
     </header> 

     <p class='date-author'>Date: $date <br /> Author: <span style='color: #10466C;'>$author </span> | Catagory: <a href='#'>$catagory</a> | Writer Level: $level<br /> 
     Comments: ($cmt_total) </p> 

     <content> 
      <img class='article-image' src='$image' /> 

      <div style = 'float: left; margin-left: 3%; width: 45%;'> 
      <div class='like_box'> 
       <a href='vote.php?vote=like&title=$title'><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p> 
       <p style='color: #fff;'>$like_username</p> 
      </div> 

      <div class='dislike_box'> 
       <a href='vote.php?vote=dislike&title=$title'><img src='img/dislike.png' class='vote'></a><p class='vote_text'>$dislike_num</p> 
       <p style='color: #EC2800;'>$dislike_username</p> 
      </div> 

    </div> 

    <div style='display: inline-block; margin-top: 10px;'> 
     $text<a href='article.php?article=$title'><b>read more</b></a> 
    </div> 

</content> 
<br /> 
<br /> 

</article> "; 

}

私の質問は、ページを更新してヘッダータグを使用してリダイレクトせずにスクリプトを実行する方法です。どんな援助も感謝し、私が提供したいと思うかもしれない追加情報があります。私はAJAXまたはJavaScriptが必要なことを私が知っている多くの方法を試してきました。

ありがとうございました。

+5

#javascript #ajax、あなたは自分で質問に答えました。これまでに何を試しましたか? – Stu

+1

あなたもアヤックスくんですか? – Rachmaninoff

+2

あまりうまくいけない –

答えて

2

もっと深刻なことに、

誰かがこれを行う方法を示す疑似コードや何かを書いている可能性がありますか?

質問(さらに助けて幸せが、私は尋ねたとして、これは正しい方向にポイントにあなたを助けるかもしれないと思う):

あなたはクリックをピックアップトリガーを設定する必要があります。

<div class='dislike_box'> 
    <a data-dislike="<?php echo $id; ?>"> 
     ... 
    </a> 
</div> 

これをjsで取得します。

document.querySelectorAll('a[data-dislike]').onclick = function() { 
    // make an ajax call to your like/dislike script 
    // and on success change the DOM somehow 
}; 

その後、あなたは// make an ajax call to your like/dislike scriptdata-likeに何があるかなどAJAX呼び出しを経由して送信します(変数に取る必要がある「と呼んで」と、あなたのスクリプトで拾っ作るときに呼び出されるあなたの(おそらくPHP)スクリプトで/ attr)

これらのvarsをajax呼び出しから継承してPHPスクリプトで取得すると、データベースの更新を実行し、クライアント側のスクリプトに " "あなたはajax呼び出しから受け取ったものに基づいてDOMを更新します。

これは意味をなさないことを教えてください。

関連する問題