weixin_33737774 2015-03-30 16:52 采纳率: 0%
浏览 44

实现Ajax / Jquery

OK, I am going to preface this with the warning that my code skills are really rudimentary--I've cobbled together what I can, but my lack of experience with Javascript is keeping me from implementing this final thing. I have my page set up: http://excitable.media/reddit.php

It is almost doing what I want. The arrows are changing on click with the CSS. The Big number is being called from an SQL Database, in a table named votes that has only one column--count. What I want to happen now is that when someone clicks the up arrow, the count entry is increased by one and the vote count on the page is updated. I know I need AJAX/JQuery to do this, but once again, even the syntax is difficult for me. Here is the page code right now:

<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>

Can anyone help me with this rudimentary coding project? I have another php file called 'insert.php' that connects to the database and then says:

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

The reddit.js file is totally empty right now, it's where I am expecting to place the code to make this work. It's also worth mentioning that I don't care about the down arrow at all. I don't want it to function. I only want the up arrow to work. I don't care if people click it more than once from the same IP.

  • 写回答

3条回答 默认 最新

  • weixin_33698823 2015-03-30 17:04
    关注

    As others have mentioned, you should change your mysql code. As for the js, you could do something like this: 

    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
            })
        }        
    })
})

    Note: It would be even better to return new count from server in case 2 or more different users update the counter, in that case the local page would show incorrect count

    评论

报告相同问题？

悬赏问题

  • ¥15 LiBeAs的带隙等于0.997eV,计算阴离子的N和P
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 matlab有关常微分方程的问题求解决
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字？
  • ¥100 求三轴之间相互配合画圆以及直线的算法