实现Ajax/Jquery

Question

好的，我将在开始之前警告我，我的代码技能真的很初级--我已经拼凑了我能做的事情，但我缺乏使用Javascript的经验，这阻碍了我实现最后的东西。我设置了我的页面：http://excitable.media/reddit.php

它几乎是在做我想要的事情。单击CSS时，箭头会发生变化。大数字是从一个名为votes的表中调用的，该表只有一个列--count。我现在想要发生的是，当有人单击向上箭头时，count条目会加1，页面上的投票计数也会更新。我知道我需要AJAX/JQuery来做这件事，但是再说一次，即使是语法对我来说也很难。下面是现在的页面代码：

<html>
<head>
<meta charset="utf-8">
<title>Reddit</title>

<link rel="stylesheet" type="text/css" href="css/css/reddit.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="css/js/reddit.js"></script>

</head>
<body>
<h1>reddit</h1>

<div class="container">
<div class="up">
<input id="img-switcher" type="checkbox"></input>
<label for="img-switcher"></label>
</div>
<div class="count" id="vote-value">
<?php
include '../php/config.php';
$con;
$dbhandle;
$selected;
if($vote)
echo $vote[0];
?>
</div>
<div class="essay">
<p>Registering an account with Reddit [paragraph text omitted]</p>
</div>
<div="down">
<input id="img-switcher-2" type="checkbox"></input>
<label for="img-switcher-2"></label>
</div>
</div>

</body>
</html>

有人能帮我完成这个初级的编码项目吗？我有另一个名为'insert.php‘的php文件，它连接到数据库，然后说：

$update=mysql_query("UPDATE 'votes' SET 'count'='count'+1)");
if(mysql_query($update)){
    return "success!";
}
else {
    return "failed!";
}

reddit.js文件现在完全是空的，我希望将代码放在这个文件中以使其工作。值得一提的是，我根本不关心向下箭头。我不想让它起作用。我只想让向上箭头起作用。我不介意人们在同一个IP上点击超过一次。

Answer 1

正如其他人所提到的，您应该更改您的mysql代码。至于js，你可以这样做：

var blocked = false; // if we are waiting for a server response, we need to block up arrow click
$(document).ready(function(){
    $(".up").click(function(){ // on click
        if(blocked == false){ // if we are not waiting a server response
            blocked = true; // we are waiting a server response
            $.ajax({ //make ajax
                url: "insert.php"
            }).success(function(msg){ 
                if(msg == "success!"){ // if it was success, add 1 to our local count
                    $(".count").text(Number($(".count").text()) +1)
                }else{
                    console.log(msg)
                }
                blocked = false; // allow up arrow click again
            }).fail(function(){
                console.log("failed")
                blocked = false;// allow up arrow click again
            })
        }        
    })
})

注意:在2个或更多不同用户更新计数器的情况下，从服务器返回新的计数会更好，在这种情况下，本地页面将显示不正确的计数

Answer 2

您需要添加一个ajax事件，该事件将向数据库发送请求并从数据库中获取数据，查询将如下所示：

$("button").click(function(){
   $.ajax({url: "demo_test.txt", success: function(result){
    $("#div1").html(result);
    }});
 }); 

http://www.w3schools.com/jquery/ajax_ajax.asp，其次，您的更新查询是错误的，请再次检查

Answer 3

感谢每一个发布帮助的人--这是一个漫长的过程，但我最终让它工作了。我做了一些JQuery、SQL和PHP教程，并极大地改进了困扰我的code...the最终罪魁祸首--根目录之外的文件路径！

对于Javascript来说，简单的$.get和$.post命令就足够了。我最终将它拆分为两个函数，一个函数用于初始加载计数，另一个函数用于更新/更改计数，每个函数引用不同的php文件：

$.get('/css/js/fetch.php', function(data) {
        $('.count').html(data);
});

和

$('#up').click(function(){
    $.post('/css/php/insert.php', function(data) {
        $('.count').html(data);
    });
});

另一件让我陷入困境的事情(如果有人曾经搜索过同样的问题并阅读了这篇文章)，就是信息到底是如何从PHP文件传递到Javascript的。在fetch.php (用于初始显示)中，我写道：

$result = mysql_query("SELECT * FROM votes WHERE id = 1");
while ($row = mysql_fetch_assoc($result)) {
     echo $row["VoteCount"];
}

我想，“关键”是使用echo创建一个输出，然后Javascript就可以获取它(我看的是json_encode，但我猜这比我需要的要复杂得多)