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

这是db中的表

我有三行:一个id自动插件.a 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); }
});

自动检测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'.

希望这是有帮助的;-)

//编辑:我发现代码标签有些错误.修正了"手册"的第一部分.