JavaScriptを使用してPHP値を動的に変更する

Question

ブログの種類のウェブページを作成しています。divのように「嫌い」ボタンがあり、上記の評価は好きなもののmysqlクエリです（/好き嫌い+嫌いです）。ユーザーが好き嫌いをクリックすると、その投票をdbに追加し、ページをリロードせずに評価値を動的に変更したいと考えています。ここではhtmlの少しスニペット、私はほとんどjavascriptで働いているので、任意の助けが素晴らしいだろう。

<div class="narrow_right_container"> 
    <?php 
    $popularity = get_popularity($row); 
    ?> 
    <div class="yellow_bg">Rating: <?php echo $popularity . "%"; ?></div> 
    <div style="margin-left:2px;"> 
    <div class="dislike"> 
     <a href="#"><img src="ui_images/dislike.png"/></a> 
     <span>Dislike</span> 
    </div> 
    <div class="like"> 
     <a href="#"><img src="ui_images/like.png" /></a> 
     <span>Like</span> 
     </div> 
    </div> 
</div> 

Answer 1

$('.like').click(function(){ 
    rate(1); 
}) 
$('.dislike').click(function(){ 
    rate(-1); 
}) 

function rate(_val){ 
$.ajax({ 
    url: 'ajax/rate.php?val='+_val, 
    success: function(data) { 
    alert('Rate was performed.'); 
    $(".narrow_right_container").find(".yellow_bg").append("Rating: "+data+"%"); 
    } 
}); 
} 

：このような

何か、それはもともと最初の文だけを持っていたので

if(isset($_GET['val'])){ 
    $sql = "UPDATE.........."; //do an update to your rate table 
    echo get_popularity($row); //return rating to ajax 
} 

Answer 2

これを達成するには、ajaxを使用する必要があります。 VIA javascriptを使ってPHP変数を変更することはできません。

あなたはデータベースの作業を引き渡すAjax関数を呼び出さなければならず、作業が完了した後、javascriptを使用してカウントを更新する必要があります。これは、ここ（アヤックスから）

をカウントは、データベース内で更新される一方、カウントが更新されたことをほのめかしを与えるあなたはこれを実現できる方法の良い例です：

Example Code
Live Demo

Answer 3

あなたは実際にはPHPの値を変更していないでしょう。ページがブラウザに出力されたら、PHPがなくなったとみなしてください。サーバ上にあるため、対話できません。代わりに、ブラウザにあるドキュメントとやりとりすることを考えてください。

これを行う最善の方法は、サーバー側スクリプトへのajax呼び出しを行うことです。そのサーバー側のスクリプトは、データベースに好き嫌いをつけて、新しい評価を返します。新しい評価は、javascriptを使って古いものの代わりに挿入することができます。

javascriptとajaxに関するチュートリアルをチェックしたいと思うかもしれません。特定の問題よりもチュートリアルを必要とするようです。言い換えると、一般的な主題に関する知識のギャップを埋めると、あなたは特定の問題を非常に簡単に解決することができます。

Answer 4

サーバー側のデータベースへの保存を処理するためのPHPコードを作成する必要があります。あなたは、このサーバーサイドスクリプトに好き嫌いの値の情報をPOSTします。可能であれば、jQuery's AJAXヘルパーを使用して、作成したばかりのPHPページにデータを投稿します。 rate.phpで

$.ajax({ 
    url: "whatever.php", 
    type: "POST", 
    data: {Like: true}, 
    success: function(data){ /* update view */} 
});