实施简单的upvote downvote程序答案

【问题标题】：Implementing simple upvote downvote program实施简单的upvote downvote程序
【发布时间】：2016-06-04 19:43:18
【问题描述】：

我正在使用 express.js 和 jQuery 创建一个基本的 upvote downvote 程序。基本上，每当按下投票按钮时，投票按钮都会递增/递减，并且每次点击按钮的结果都会显示在下方。单击按钮时没有任何反应，甚至没有Cannot POST /。我不确定是什么导致了错误。这是我的main.js 文件的样子：

$(document).ready(function(){
$("#up").click(function(){
    var up = $.post("/upvote", {changeBy: 1}, function(dataBack){

        $("#upvote").text(dataBack);
    });

});
$("#down").click(function(){
    var down = $.post("/downvote", {changeBy: 1},
    function(dataBack){
        $("#downvote").text(dataBack);
    });

  });
});

然后在服务器端server.js，我有这个：

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

var inc = 0;
var dec = 0;

app.post("/upvote", function(req, res){
   res.setHeader("Content-Type", "application/json");
   inc += parseFloat(req.body.changeBy);
   res.write(JSON.stringify(inc));
   res.end();

});
app.post("/downvote", function(req, res){
   res.setHeader("Content-Type", "application/json");
   dec -= parseFloat(req.body.changeBy);
   res.write(JSON.stringify(dec));
   res.end();

 });


var server = app.listen(8081, function () {

    var host = server.address().address
    var port = server.address().port

    console.log("Example app listening at http://%s:%s", host, port)

})

一点 HTML：

<div class="buttons">
<button id="down">Downvote</button>
    <p id="downvote"></p>
<button id="up">Upvote</button>
    <p id="upvote"></p>
</div>

【问题讨论】：

您在客户端遇到任何错误？
我不知道。似乎它在服务器端不起作用。

标签： javascript jquery node.js

【解决方案1】：

我试了一下，效果很好。这真的是您使用的整个 html 吗？那么这就是错误。您需要将 jquery 和 main.js 包含到 html 中。我将 query.min.js 复制到服务器的公共目录中。

<html>

<head>
  <title>Up Down Vote</title>
  <script src="jquery.min.js"></script>
  <script src="main.js"></script>
</head>

<body>
  <div class="buttons">
    <button id="down">Downvote</button>
    <p id="downvote"></p>
    <button id="up">Upvote</button>
    <p id="upvote"></p>
  </div>
</body>

</html>

【讨论】：

我有这个：Upvote Downvote
PS：当然这个index.hml、main.js和query.min.js都在public文件夹里。

【解决方案2】：

我使用您的代码创建了一个 jsfiddle，它似乎可以很好地处理点击事件。当然，ajax 会调用错误，但点击事件处理程序本身似乎至少称为 Chrome。

<div class="buttons">
<button id="down">Downvote</button>
    <p id="downvote"></p>
<button id="up">Upvote</button>
    <p id="upvote"></p>
</div>

$(document).ready(function(){
$("#up").click(function(){
    var up = $.post("/upvote", {changeBy: 1}, function(dataBack){

        $("#upvote").text(dataBack);
    });

});
$("#down").click(function(){
    var down = $.post("/downvote", {changeBy: 1},
    function(dataBack){
        $("#downvote").text(dataBack);
    });

  });
});

https://jsfiddle.net/j14qkyae/

【讨论】：

是的。我想知道我的 server.js 设置是否有问题。