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

时间:2015-09-02 09:30:46

标签: php ajax

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

MY KNOWLEDGE: Starter。

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

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

  1. 点击1:将数据发送到php。
  2. 点击2:从php获取数据并将其显示在DOM上。
  3. 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文件。这允许我做几次检查,看看点击是否“好”。或者“坏”&#39;并在我的数据库中相应地减去或添加数据。

    • #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表示。

1 个答案:

答案 0 :(得分:3)

如果您说在第二次点击之前没有收到回复,那么您的意思是votes div中的“votes_sum”是否未使用最新的投票进行更新?

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