Javascript 实现Ajax/Jquery_Javascript_Php_Jquery_Mysql_Ajax

Javascript 实现Ajax/Jquery

javascript php jquery mysql ajax

Javascript 实现Ajax/Jquery,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,好的，我将在这篇文章的开头警告大家，我的代码技能真的很初级——我已经拼凑了我能拼凑的东西，但是我缺乏Javascript方面的经验使我无法实现这最后一件事。我已设置我的页面：它几乎在做我想做的事情。使用CSS单击时，箭头会发生变化。这个大数字是从SQL数据库中调用的，在一个名为vots的表中，该表只有一个列计数。我现在想做的是，当有人单击向上箭头时，计数条目增加1，页面上的投票计数更新。我知道我需要AJAX/JQuery来实现这一点，但再一次，即使是语法对我来说也很困难。以下是当前的页面代码：

好的，我将在这篇文章的开头警告大家，我的代码技能真的很初级——我已经拼凑了我能拼凑的东西，但是我缺乏Javascript方面的经验使我无法实现这最后一件事。我已设置我的页面：

它几乎在做我想做的事情。使用CSS单击时，箭头会发生变化。这个大数字是从SQL数据库中调用的，在一个名为vots的表中，该表只有一个列计数。我现在想做的是，当有人单击向上箭头时，计数条目增加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>

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

正如其他人所提到的，你应该更改你的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或更多不同的用户更新计数器时，最好从服务器返回新的计数，在这种情况下，本地页面将显示不正确的计数

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

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

其次，您的更新查询错误，请再次检查它

谢谢所有发布帮助的人。这是一个漫长的过程，但我终于让它工作了。我做了一些JQuery、SQL和PHP教程，并极大地改进了代码……让我陷入困境的最终罪魁祸首是指向根目录以外文件的文件路径

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

$.get('/css/js/fetch.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，但我想这比我需要的要复杂得多

mysql_query是一个不推荐使用的函数。如果你还在学习，这是一个很好的时间来了解它的替代品。我认为你在更新声明中使用了错误的引号。普通的单引号用于字符串，而不是用于括起标识符。该查询将永远无法工作。”“投票”是一个字符串。您需要“投票”，并且实际上不需要转义列名或表名，除非您使用保留关键字；

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

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