寻找实现 AJAX 项目的语法指南

Question

我正在承担我的第一个 AJAX 项目，并且在概念上大部分内容都已规划好，但由于我缺乏语法知识而受到阻碍。我想我的结构/功能逻辑也可能有点偏离标准。

我正在寻找一些指导，尽管参考教程或对我遗漏或忽略的内容进行任何更正。

profile.php：这是具有要单击的实际拇指图标和$.post 函数的页面：

这是拇指结构。

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

<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) How to create a click event

首先，我插入'2'作为href。

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

EDIT：万一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) Getting the ID value from the clicked link.

在click函数内部，我们可以使用$(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) Sending the Request

如果您刚刚开始使用 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) Returning an array of data with 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 元素中。

希望这会有所帮助；-)

//edit：我注意到代码标签有一些错误。修正了“手册”的第一部分。