简单的“喜欢/不喜欢"文本按钮-添加Ajax等 [英] Simple Like/Unlike text button - adding ajax etc

问题描述

我正在尝试在PHP中创建一个非常简单的喜欢/喜欢"按钮(页面不会刷新) 我知道有不计其数的教程，但是因为我对ajax&完全陌生. jQuery，我不知道如何实现它们(在哪个文件中代码的哪一部分去了等等). 我有一个用户ID的数据库和一个新的用户喜欢的数据库.我已经走了这么远:

I'm trying to make a very simple Like/Unlike button in PHP (where the page does NOT refresh) I know there are countless tutorials on this but because I am completely new to ajax & jquery, I can't figure out how to implement them (in what file does which part of the code go etc). I have a database of userid's and a new database of user likes. I've gotten this far:

<?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进入哪里来制作文本按钮，以及在哪里对它们的功能进行编码……任何帮助将不胜感激.

This works, and it manages to check if the user has liked the page/game before or not. And I know I can figure out the last steps, which would be inserting or deleting the like/unlike into the database. I just can't figure out the middle bit, where ajax and jquery come in to make the text buttons and where to code their function... Any help would be greatly appreciated.

推荐答案

让我们假设您有两个按钮:喜欢"和不同".理想情况下，您还可以通过按钮存储gameID，如下所示:

Let's suppose you have two buttons: Like and Unlike. Ideally, you also will be able to store the gameID with the button, something like this:

<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>

您喜欢/不喜欢的代码如下:

Your code for the like/dislike will be something like this:

<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;

注意:

1. 可以在文档中的</body>标记之前添加javascript/jQuery代码.

1. The javascript/jQuery code can be added in the document just before the </body> tag.

对于AJAX PHP代码，您需要一个单独的文件. 这就是为什么. 可以将相同的AJAX PHP文件用于多个AJAX调用，并发送一个额外的变量来标识要处理的AJAX调用.

You need a separate file for the AJAX PHP code. Here's why. It is possible to use the same AJAX PHP file for multiple AJAX calls and send an extra variable that identifies the AJAX call to be processed.

jQuery AJAX成功函数中将提供PHP AJAX文件提供的所有ECHOd.在我的示例代码中，它出现在名为d

Anything ECHOd by the PHP AJAX file will be available in the jQuery AJAX success function. In my sample code, it appears in a variable called d

此答案包含一些简单的AJAX示例，这些示例可能有助于解决AJAX问题.我建议复制完整的示例，并使其在您自己的服务器上工作.那十五或二十分钟将为您节省HOURS.

This answer contains some simple AJAX examples that might help get the hang of AJAX. I recommend copying the complete example and making it work on your own server. Those fifteen or twenty minutes will save you HOURS.

使用jQuery的AJAX请求回调

这篇关于简单的“喜欢/不喜欢"文本按钮-添加Ajax等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！