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

我正在进行我的第一个AJAX项目，并且在概念上已经把大部分内容都规划好了，但是由于缺乏语法知识，我被耽搁了。我想我的结构/功能逻辑也可能有点不对劲

我正在寻找一些指导，尽管是参考教程或任何我遗漏或忽略的更正

profile.php：这是一个有实际拇指图标可点击和

$功能的页面。post

功能：

这是拇指的结构

单击thumb时，我需要发送评论的id？我知道我需要计算它被点击的事实，并将其发送到$。在本页底部的Post区域，我还需要在thumb counter 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>

thumbs.php：是当单击thumb并通知db存储clikc时发送增量请求的页面，我在这个页面上还没有任何内容。但我假设它将通过另一个页面传递一条点击记录，从另一个页面的

$.post

函数，从语法上我不知道这将如何工作，然后通过插入查询将该记录发送到数据库

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

下面是数据库中的表的内容

---

我有三行：自动插入的

id

。一个

comment\u id

这样它就知道哪个评论被“喜欢”，最后一个

likes

来跟踪竖起大拇指的次数。

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

1）如何创建点击事件

首先，我插入了“2”作为href

<a class="myButtonLink" href="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'和'not'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并随此请求发送$\u POST值（$\u POST['comment\u 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\u 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读取。首先，我们正在检查结果是什么（错误或成功），如果是错误，我们会提醒发送的消息（错误的DB连接、错误的评论ID、无法计算投票数等）。结果是成功，我们会提醒投票数已计算并放入（更新）ID为“numvotes”的div/span/other元素中的投票数

希望这是有帮助的；-）

//编辑：我注意到代码标签有一些错误。修复了“手册”的第一部分。
@pixelbobby为什么？这显然是个密码问题，你说得对。我直到一秒钟前才看到代码。请看我的答案，它解释了实现这一点所需的不同类型的ajax/jquery语法，并解释了一些不同的选项。希望它能帮上忙。这应该在codereview上。@JakubHampi谢谢你的编辑！；）是的，这帮了大忙！非常感谢您深思熟虑的回复。如果有帮助，接受答案将是非常好的；-）当我在没有启用Javascript的情况下浏览你的页面时，这会让我大吃一惊。重点是，你有什么建议或解决方案可以提供吗？我对这个很陌生。然后使用
$（this.attr（'id'）
，而不是
$（this.attr（'href'）
）。最好在上面的例子中以这种方式加以说明。我将编辑答案+1请克里斯注意；-）
$('.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);
      }
    }
});