Question

我正在尝试在PHP中创建一个非常简单的Like / Different按钮（页面不刷新）我知道有无数的教程，但是因为我对ajax＆amp; jquery，我无法弄清楚如何实现它们（在哪个文件中代码的哪一部分等）。我有一个userid的数据库和一个用户喜欢的新数据库。我已经走到了这一步：

<?php
if (!loggedin())    {
    echo 'Please login or register to fave games';
} else {
    $gameNum = $GAMES_REPOSITORY[$this_game][num];
    $qry = mysql_query("SELECT * FROM fave_games WHERE gamenum='".$gameNum."' AND userid='".$_SESSION[userID]."'");
    if (mysql_num_rows($qry)==0)    {
        # print button to fave
        echo 'You haven\'t liked this';     

    } else  {
        # print button to unfave
        echo 'You\'ve liked this';

    }
}
?>

这是有效的，它设法检查用户之前是否喜欢该页面/游戏。而且我知道我可以弄清楚最后的步骤，即插入或删除类似/不同的数据库。我只是想不出中间位，ajax和jquery进来制作文本按钮以及在哪里编写它们的功能...任何帮助都将非常感激。

Answer 1

假设你有两个按钮：喜欢和不喜欢。理想情况下，您还可以使用按钮存储gameID，如下所示：

<button id="L-17" class="likers">Like PacMan</button>
<button id="U-17" class="likers">Un-like PacMan</button>

更多代码在这里

<button id="L-18" class="likers">Like Tetris</button>
<button id="U-18" class="likers">Un-like Tetris</button>

您喜欢/不喜欢的代码将是这样的：

<script type="text/javascript">
    $(function(){
        $(document).on('click', 'button.likers', function(){
            like_type = this.id.split('-')[0]; //L or U
            like_val  = this.id.split('-')[1]; //17 (Pacman) or 18 (Tetris)
            $.ajax({
                type: 'post',
                 url: 'another_php_file.php',
                data: 'lt=' +like_type+ '&lv=' +like_val,
                success: function(d){
                    if (d.length) alert(d);
                }
            });
        }); //END button.likers click
    }); //end document.ready
</script>

<强> another_php_file.php：

<?php
    $lt = $_POST['lt'];
    $lv = $_POST['lv'];
    $like_status = ($lt == 'L') ? 1 : 0 ;
    $pseudo_query = "UPDATE `fave_games` SET 'game_liked' = '$like_status' WHERE `game_num` = '$lv' "

    echo 'Submitted a ' . $lv;

注意：

javascript / jQuery代码可以添加到</body>标记之前的文档中。
您需要一个单独的AJAX PHP代码文件。 Here's why。 可以对多个AJAX调用使用相同的AJAX PHP文件，并发送一个额外的变量来标识要处理的AJAX调用。
PHP AJAX文件的任何ECHOd都将在jQuery AJAX成功函数中提供。在我的示例代码中，它出现在名为d
这个答案包含一些简单的AJAX示例，可能有助于掌握AJAX。我建议复制完整的示例并使其在您自己的服务器上运行。那些十五或二十分钟将为你节省时间。

AJAX request callback using jQuery

Answer 2

要切换按钮，请说像/不同：

<script type="text/javascript">
    var like_type, like_val; //declare outside fns to make global
    $(function(){
        $(document).on('click', 'button.likers', function(){
            like_type = this.id.split('-')[0]; //L or U
            like_val  = this.id.split('-')[1]; //17 (Pacman) or 18 (Tetris)
            $.ajax({
                type: 'post',
                 url: 'another_php_file.php',
                data: 'lt=' +like_type+ '&lv=' +like_val,
                success: function(d){
                    if (d.length) alert(d);
                    $('#' +like_type+ '-' +like_val).text('Different text');
                }
            });
        }); //END button.likers click
    }); //end document.ready
</script>

var btn;
$('#b17').click(function(){
	btn = this.id;
	$(this).animate({
		'font-size': '30px'
	},500,function(){
		$('#' + btn).text('Bonjour');
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b17">Like</button>

jsFiddle Demo

简单的喜欢/不像文本按钮 - 添加ajax等

2 个答案: