AJAX / PHP投票系统:内容在第一次点击时不会更新


AJAX / PHP voting system: Content not updating on first click

测试环境:Windows 8使用工具XAMMP .PHP和Mysql是最新的。


我的知识:入门。


问题:我无法在第一次点击后立即获得更新的内容,只能在第二次点击后获得更新的内容,考虑到我的小投票系统有两种按钮,这可能会变得非常讨厌。是的,我说了很多不是很多:(造成这种困境的原因是什么,我该如何解决这个问题?


我尝试了什么:network analysis检查了我的开发人员工具,每次点击都会得到一个状态 200,值正确。使用我的 Firefox DOM inspector view时,我看到了一些不寻常的东西:第一次点击时,只有#votes被标记为橙色,可能表示它受到了影响。但是,只有在第二次尝试使用同一按钮时,两个div #votes and #progress 除了更新的值外,还会被标记为橙色。所以我希望它在第二次点击时会这样做,但在第一次点击时不会。然后我刷新了我的页面并尝试了其他东西。我单击了"坏",这次第二次单击落在"好"上,更新了 DOM 中的值。似乎整个过程是分开的,而不是同时发生的,这就是为什么我推测:

  1. 单击 1:将数据发送到 php。
  2. 单击 2:从 php 获取数据并将其显示在 DOM 上。

PHP 代码本身与我的数据库和 HTML(如果设置为提交(一起工作得很好,所以我不认为服务器端有任何错误。已设置与数据库的连接。我的会话效果很好。没有错误。

我的控制台显示 0 个 JavaScript 错误。

测试 1 : I commented out my entire php code and set up a testing variable with a simple string并相应地更改了下面代码中的值。令我惊讶的是,单击它立即获取数据并显示我的测试变量的内容。

测试 2 :: 您将在下面看到I removed the php codes from the two div tags。它们充当占位符,在任何 AJAX 发生之前显示当前值。我删除了这些,并在第一次单击时获得更新,因为容器首先是空的。虽然,在第二次点击和在好与坏之间切换恰好又是一团糟。

测试 2 :: 将 jquery 和我的 AJAX 脚本放在文档的head中也没有完成这项工作(只是为了安全起见(。之前是在</body>标签之前


  • 我通过名为 data 的回调参数访问返回的 json 对象,然后通过 jquery 将 html 和 css 插入到相应的div 容器中。

  • 将下面的jquery转换为纯javascript,但没有观察到积极的变化。


JAVASCRIPT/AJAX

function vote(type) {
    $.get('php/core/voting_system_function.php', {vote:type}, function(data) {
    $('#votes').html(data.votes_sum);
    $('#progress').css('width', data.progress);
    }, 'json');
}


.HTML

  • buttons onclick event将数据馈送到我的投票函数中的参数,然后将其发送到{vote:type},然后发送到我的php文件。这允许我进行多次检查以查看点击是"好"还是"坏",并在我的数据库中相应地减去或添加数据。

  • #votes#progress


<div id="quality_meter">
    <div id="progress" style="width:<?php echo $progress ?>"></div>
</div>
<div id='votes'><?php echo $votes_sum ?></div>


  • 与数据库的连接正确且可通过要求读取。

  • 脚本工作假设用户实际登录,因为他们无法访问该页面。如您所见,我正在使用两个会话变量。

  • 如您所见,我正在检查单击了哪个按钮并相应地进行查询。

  • 代码的最后一位通过关联数组返回一个 json 对象,其中包含您在那里看到的变量存储的数据,该变量votes_sumprogress。我使用 json_encode 返回我的值的 json 表示形式。

当你说直到第二次点击才得到响应时,你的意思是votesdiv中的"votes_sum"没有更新最新的投票吗?

这样做的原因是,您在调用 voting_system() 函数之前计算$votes_sum值,该函数是更新投票计数的函数,然后在voting_system()之后将$votes_sum(保持不变(移动到 $output 数组。