使用ajax php mysql用html鏈接單擊更新數據庫

Question

我已經閱讀了許多類似的問題，並嘗試將其在我的網站上工作，但是它不起作用（當您單擊鏈接時，控制台上沒有響應，並且數據庫也沒有更新）。

我要執行的操作是：我希望用戶通過單擊評論旁邊的圖標為評論+1評分。 我想要那更新我的mysql comment_table列，稱為rating為rating+1 。 當我在沒有AJAX的情況下執行此操作時（即，僅將表單操作設置為php page?id=10 ）就可以正常工作。 我無法通過AJAX更新數據庫。

我的主頁上有評論：

<a href="javascript:void(0);" onClick="updateRating(1,<?php echo $thisperspective_row['id']; ?>)" alt="UPVOTE" id="upvote_<?php echo $thisperspective_row['id']; ?>"><span class="glyphicon glyphicon-chevron-up"></span></a>

該鏈接下方的javascript：

<script type="text/javascript"> 
function updateRating(rating, id){

$.ajax({
    type: "GET",
    url: "rating.php",
    mode: "vote",
    rating: rating,
    id: <?php echo $thisperspective_row['id']; ?>,
    success: function(response) {
     console.log(response); 
    }
});
return false; // Prevent the browser from navigating to the-script.php
                };
</script>

而我的rating.php文件是

<?php
require_once('connectiontodatabase.php'); 

/* simple comment up and down voting script */
$mode = $_GET['mode'];
$rating = $_GET['rating'];
$id = $_GET['id'];

if ($mode=="vote")
    {
    // The name of the 
    $cookie = "nameofmycookie".$id;  
    if(isset($_COOKIE[$cookie])) 
        { 
        echo '<div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> Sorry You have already rated this comment within the last 14 days.</div>'; 
        } 
    else 
        {
        $expiry = 1209600 + time();  // 14 day expiry
        setcookie ($cookie, "voted", $expiry);
        mysql_query ("UPDATE comment_table SET rating = rating+$rating WHERE id=$id", $connection);
        }
    }

?>

php運行正常，當我查看源代碼時，所有變量均正確列出。 但是，當我單擊鏈接時，根本沒有響應，控制台也不會輸出響應。 我究竟做錯了什么？ 提前致謝！

Answer 1

首先，您應該更改檢測點擊事件的方式。 看看這個小提琴 。 其次，您需要使用data選項將所有變量傳遞到一個JSON字符串中 。 您的代碼應如下所示：

<span class="glyphicon glyphicon-chevron-up clickable" 
    data-rating="1" 
    data-id="<?php echo $thisperspective_row['id']; ?>"></span>

<script type="text/javascript">
    $('.clickable').on('click', function() {
        var data = {
            mode: "vote",
            rating: $(this).data('rating'),
            id: $(this).data('id')
        };
        $.ajax({
            type: 'GET',
            url: 'rating.php',
            data: data,
            success: function(response) {
                console.log(response);
            }
        });
    });
</script>

Answer 2

首先，請檢查您是否正在加載jQuery，然后使用此代碼

function updateRating(rating, id){
  $.ajax({
    type: "GET",
    url: "rating.php",
    mode: "vote",
    data: { rating: rating, id: id },
    success: function(response) {
     console.log(response); 
    }
  });
return false; // Prevent the browser from navigating to the-script.php
};

為我工作。 請注意，我在Ajax內刪除了`，因為您已經在函數中發送了參數，並且還必須使用data：來發送參數，您可以在此處看到更多示例Ajax jQuery