Question

我正在使用express.js和jQuery来创建一个基本的upvote downvote程序。基本上，每当按下时，投票按钮递增/递减1，并且每个按钮点击的结果显示在下面。单击按钮时没有任何反应，甚至不是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>

Answer 1

我使用你的代码来创建一个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/

Answer 2

我尝试了一下这是有效的。这真的是你使用的整个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计划

2 个答案: