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：是单击拇指后发送递增请求的页面，然后又告诉db存储clikc，我在这个页面上确实没有任何内容。但是我假设它将从另一个页面传递来自via $.post函数的点击记录，从语法上我不知道它将如何工作，然后通过插入查询将该记录发送到数据库。

以下是db中的表

我有三行：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.

在点击功能中，我们可以使用$(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＆amp; 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); }
});

自动检测dataType，您可以选择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);
      }
    }
});

正如您所看到的那样，我们正在使用（数据）而不是（msg），因为我们正在发回数据集。 PHP中的数组（$ arr ['result']）可以读作data.result。首先我们检查结果是什么（错误或成功），如果是错误我们警告发送的消息（错误的数据库连接，错误的注释ID，无法计算投票等等）结果是成功我们警告投票已被计算，并将（更新的）投票数放在div / span /其他元素中，ID为'numvotes'。

希望这有用; - ）

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

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

1 个答案: