php - 寻找有关实现 AJAX 项目的语法指导

Question

我正在进行我的第一个 AJAX 项目，并且在概念上已经规划了大部分内容，但由于我缺乏语法知识而被搁置了。我想我的结构/功能逻辑也可能略有偏差。

我正在寻找一些指导，尽管是对教程的引用或对我遗漏或忽略的内容的任何更正。

profile.php:这是具有可供点击的实际缩略图图标和 $.post 功能的页面:

这是拇指结构。

当点击拇指时，我需要发送评论的id？我知道我需要计算它以某种方式被点击并将其发送到 $.在此页面底部的帖子区域，我还需要在拇指计数器 div 中放置某种 php 变量，以便在 $.帖子确认它已被点击。

<div id="thumb_holder">
    <div id="thumb_report">
        <a href="mailto:info@cysticlife.org">
            report
        </a>
    </div>
    <div id="thumb_counter">
        +1
    </div>
    <div id="thumb_thumb">

        <?php $comment_id = $result['id'];?>
        <a class="myButtonLink" href="<?php echo $comment_id; ?>"></a>

    </div>
</div>

这是$.post函数

这应该发送评论的id？但最肯定的是应该发送一条拇指链接被点击的记录，并以某种方式将它发送到我与数据库对话的 php 页面。

<script>
$.ajax({
 type: 'POST',
 url:" http://www.cysticlife.org/thumbs.php,"
 data: <?php echo $comment_id; ?>,
 success: success
 dataType: dataType
});
</script>

thumbs.php:是在单击拇指时发送递增请求的页面，然后反过来告诉数据库存储一个 clikc，我在这个页面上还没有任何东西。但我假设它将通过来自其他页面的 $.post 函数传递点击记录，从语法上我不知道它是如何工作的，然后通过插入查询将拍摄它记录到数据库。

这是数据库中的表的内容

我有三行:一个自动递增的id。一个 comment_id，这样它就知道哪个评论被“点赞”了，最后一个 likes 来跟踪竖起大拇指的数量。

Answer 1

至少你已经有了一个好的开始，还有一些错误。首先，您可能需要习惯一些基本原则:

1) 如何创建点击事件

首先是按钮，我插入了“2”作为 href。

<a class="myButtonLink" href="2">Vote Up!</a>

编辑:万一 JS 被禁用，这将是一个更好的选择:

<a class="myButtonLink" href="voteup.php?id=2" id="2">Vote Up!</a>

然后是 JS:

$('.myButtonLink').click(function(e) {
  e.preventDefault();
  alert('the button has been clicked!');
});

e 表示事件，所以我们在提交后做的第一件事就是取消默认操作(重定向到'2')。然后我们提醒该按钮已被单击。如果这可行，我们可以进入下一步。

2) 从点击的链接中获取 ID 值。

在点击函数中，我们可以使用$(this)，它代表被点击的元素。 jQuery 为我们提供了一组函数来从给定元素获取属性，这正是我们所需要的。

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');
  alert('We are upvoting comment with ID ' + comment_id);
});

当一切顺利时，这应该提醒“我们正在使用 ID 2 对评论进行投票”。那么，继续下一步!

3) 发送请求

如果您刚刚开始使用 ajax/jquery，这可能是更难的一步。您必须知道的是，您发送的数据可以是 url 字符串(param=foo&bar=test)或 javascript 数组。在大多数情况下，您将使用 url 字符串，因为您正在请求一个文件。还要确保使用相关链接(“ajax/upVote.php”而不是“http://www.mysite.com/ajax/upVote.php”)。所以这里有一些测试代码:

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');

  $.ajax({
    type: 'POST',
    url: 'thumbs.php',
    data: 'comment_id=' + comment_id,
    success: function(msg) { alert(msg); }
});

数据类型是自动检测的，例如，您可以在 JSON 响应(可以是具有状态和消息响应的数组)或纯文本之间进行选择。让我们保持简单，从纯文本开始。

此脚本所做的是调用 thumbs.php 并发送一个 $_POST 值 ($_POST['comment_id'] = 2) 以及此请求。在 thumbs.php 上，您现在可以执行 PHP 部分:

1) checking if the comment_id is valid
2) upvoting the comment
3) print the current amount of votes back to the screen (in thumbs.php)

如果您将票数打印回屏幕，我给您的最后一个脚本将提醒一个包含票数的消息框。

4) 使用 JSON 返回数据数组

为了在您的屏幕上获得正确的响应，您可以考虑发回一个数组，例如:

$arr = array(
  'result' => 'success', // or 'error'
  'msg' => 'Error messag' // or: the amount of votes
)

然后您可以使用 php 函数 json_encode($arr) 对其进行编码。然后您将能够通过使用此脚本获得更体面的响应:

$('.myButtonLink').click(function(e) {
  e.preventDefault();

  var comment_id = $(this).attr('id');

  $.ajax({
    type: 'POST',
    url: 'thumbs.php',
    data: 'comment_id=' + comment_id,
    success: function(data) {
      if(data.result == "error") {
        alert(data.msg);
      } else {
        alert('Your vote has been counted');
        $('#numvotes').html(data.msg);
      }
    }
});

如您所见，我们使用的是 (data) 而不是 (msg)，因为我们要发回数据集。 PHP中的数组($arr['result'])可以读作data.result。首先，我们检查结果是什么(错误或成功)，如果是错误，我们会提醒发送的消息(错误的数据库连接、错误的评论 ID、无法计算投票等)结果如果成功，我们会提醒投票已被统计并将(更新的)票数放入 ID 为“numvotes”的 div/span/other 元素中。

希望这对您有所帮助 ;-)

//编辑:我注意到代码标签有一些错误。修复了“手册”的第一部分。