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

Question

测试环境:使用该工具的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>标签之前

---

• 我通过我的callback参数访问返回的json对象data,然后通过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>

---

---

• 与数据库的连接是正确的,可通过require读取.

• 该脚本的工作原理是假设用户实际登录,否则他们无法访问该页面.如您所见,我正在使用两个会话变量.

• 正如您所看到的,我正在检查以查看已单击的按钮并相应地进行查询.

• 代码的最后一位通过一个关联数组返回一个json对象,其中你看到的变量存储的数据是votes_sum和progress.我json_encode用来返回我的值的json表示.

Answer 1

当您说直到第二次点击才收到响应时，您的意思是votesdiv 中的“votes_sum”没有更新最新的投票吗？

这样做的原因是，您$votes_sum在调用voting_system()更新票数的函数之前计算值，然后在将未更改的voting_system()值移动到数组之后。$votes_sum$output