AJAX、jQuery、PHPを使用したシステムに似ています

Question

私のソーシャルネットワーキングサイトの投稿にpid（自動インクリメント）を付けて、好き嫌いのシステムを作ろうとしています。私はデータベースから投稿を取り出して表示するwhileループを実行し、各投稿の下に好き嫌いを付けるオプションも与えます。私は入力ラジオやチェックボックスのボタンを使用していません。代わりに、クリックしたときに色が変わるアイコンを使用しました。同じアイコンでonclickイベントを使用してAJAX関数が呼び出されました。

AJAX関数は、likes.phpというファイルに移動する必要があります。ここでは、そのpost idを持つ行が検索され、その行のlikes列が更新またはインクリメントされ、echoによって結果が返されます。これらはすべて動作するはずですが動作しません。

AJAX関数は、post id（pid）をパラメータとして受け取り、likes.phpに渡します。likes.phpには、そのpost idに対応するlikesフィールドがインクリメントされます。各投稿のアイコンにはid = post idが割り当てられており、クリックされたようなボタンを選択し、AJAX機能で投稿IDが渡されます。結果はid = "like" + post pidを持つspan要素に返されます。

私のコード

のindex.php - 投稿を表示し、ボタン

$q = $conn->prepare("SELECT * FROM posts ORDER BY pid DESC"); 
$q->execute(); 

while($row = $q->fetch(PDO::FETCH_ASSOC)) { 
#my post representation using div and all... 

#like/dislike button 
    <span class=\"right floated\" id=\"like".$row['pid']."\" > 
<i id=\"".$row['pid']."\" class=\"heart icon\"  onclick=\"like(".$row['pid'].")\"></i> 

    </span> 

      } 

AJAX機能 '' パラメータのローカル変数である

<script> 
       $(document).ready(function(){ 
        function like(a) { 
        $("#"+a).css('color','red'); 
        $.ajax({ 
        url: "likes.php", 
         data: ({pid: a}), 
        type: "POST", 
        success:function(data){ 
         $("#like"+a).html(data); 
         }, 
        error:function(){} 
         }); 
        } 
        }); 
        } 
       </script> 

likes.phpようにしますファイル

   <?php 
      session_start(); 
      include 'db.php'; 



      $j =$_POST['pid']; 

      $sql = "UPDATE posts SET likes = likes +1 WHERE pid ='" . $j . "'"; 
      $r = $conn->prepare($sql); 
      $r->execute(); 

     $sql = "SELECT * FROM posts WHERE pid ='" . $j . "'"; 
     $r = $conn->prepare($sql); 
     $r->execute(); 
     $ry=$r->fetch(); 
     if($r) 
      { 
     echo $ry['likes']; 
      } 


     ?> 

なぜそれが機能しないのか教えてください。 onclickを使用してアイコンのクリックを検出する必要がありますが、それでも機能していないと思います。クリックすると何も起こらないので、AJAX関数は実行されません。

Answer 1

の中にlike関数を宣言すると、その範囲外で関数が定義されていないという問題があります。

でとりうる解決策：

• は、あなたの関数を呼び出す代わりにのonClick HTMLプロパティのdocument ready
• 使用jQueryの.click（または.on('click',）の外VARを作成document ready範囲
• 前に、あなたの関数を宣言し

0123の前に関数を宣言してください

スクリプト範囲：

function like(a) { 
    $("#" + a).css('color','red'); 
    $.ajax({ 
     url: "likes.php", 
     data: {pid: a}, 
     type: "POST", 
     success:function(data){ 
      $("#like" + a).html(data); 
     }, 
     error:function(){} 
    }); 
} 

はdocument ready

var like; 
$(document).ready(function(){ 
    like = function(a) { 
     $("#" + a).css('color','red'); 
     $.ajax({ 
      url: "likes.php", 
      data: {pid: a}, 
      type: "POST", 
      success:function(data){ 
       $("#like"+a).html(data); 
      }, 
      error:function(){} 
     }); 
    } 
}); 

文書までやる仕事この機能準備ができていないではないので（これは、いくつかの問題を引き起こす可能性の外VARを作成します。 ）

j

あなたの関数を呼び出す代わりのonClick HTMLプロパティのクエリ.click（または.on('click',）index.phpの

<span class=\"right floated\" id=\"like".$row['pid']."\" > 
    <i id=\"".$row['pid']."\" class=\"heart icon action-like\"></i> 
</span> 

これは動作するはずスクリプト

$('.action-like').on('click', function(){ 
    var pid = $(this).attr('id'); 

    $("#" + pid).css('color','red'); 
    $.ajax({ 
     url: "likes.php", 
     data: {pid: pid}, 
     type: "POST", 
     success:function(data){ 
      $("#like" + a).html(data); 
     }, 
     error:function(){} 
    }); 
}); 

。 mysqlの代わりにmysqliを使用し、あなたのようにクエリにパラメータを渡さないでください（のSQLインジェクションを読んでください）。そして、長い静的な文字列をエコーし​​ないでphpタグを閉じて、動的データをエコーアウトする必要があるときにオープンしてください。