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

我正在接受我的第一个 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所以它知道哪个评论被“喜欢”,最后一个人喜欢跟踪赞成的数量.

解决方法:

至少你已经有了一个良好的开端,但仍然存在一些错误.首先,您可能需要习惯一些基本原则：

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

在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)发送请求

如果您刚开始使用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)使用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’.

希望这是有帮助的;-)

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

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

相关推荐