Javascript 尝试使用express在同一路线上呈现不同的模板

我有两个按钮。当我点击红色按钮时，显示一个红色div，当我点击蓝色按钮时，显示一个蓝色div。我知道这可能没有意义，但我正在尝试使用ajax，以便在单击按钮时，服务器将知道使用特定的适当数据输出哪个div。这是我试图做的事情

脚本js:AJAX

$(function(){
    $("#red").hide();
    $("#displayRed").on("click", function(){
        $.ajax({
            url: "/",
            context : $("#red"),
            data : {redClicked: true},
            success: function(data){
                $(this).show()
                $("#blue").hide()
                console.log(this)
            }
        })
    })

    $("#displayBlue").on("click", function(){
        $.ajax({
            url : "/",
            data:{blueClicked : true},
            success : function(data){
                $("#blue").show();
                $("#red").hide();
            }
        })
    })
})

app.js:：尝试有条件地输出模板

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var name;
var age;

app.use(bodyParser.urlencoded({extended : true}));
app.use(bodyParser.json());

app.use(express.static("public"))
app.set("view engine", "jade")

app.get("/", function(req, res){
    // console.log(req.query)
    if(req.query.redClicked == true){
        console.log("Red clicked")
        req.query.redClicked = false
        res.render("red.jade", //red data//)
    }
    else if(req.query.blueClicked == true){
        console.log("blue clicked")
        req.query.blueClicked = false
        res.render("blue.jade"// blue data//);
    }
    else{
        console.log("nothing clicked")
        res.render("2buttons.jade")
    }


})


app.listen(3000, function(){
    console.log("listening on 3000")
})

好的，这里有一个问题：我每次点击一个按钮都会得到安慰“没有点击”，所以我猜其他条件都不是真的。我怎样才能像我希望的那样做类似于我的代码的事情

红玉：

html
head
    script(src="jquery.js")
    script(src="twoButtons.js")
body
    h1 test
    button#displayBlue Blue
    button#displayRed Red


    div(style="background:red; width:400; height:400;")#red Red

蓝.玉：

html
head
    script(src="jquery.js")
    script(src="twoButtons.js")
body
    h1 test
    button#displayBlue Blue
    button#displayRed Red


    div(style="background:blue; width:400; height:400;")#blue Blue

2Buttons.jade：：我想这应该在

req.query.redClicked==false时起作用，而另一个是false（问题是我认为它们总是false）：：

当按钮被点击时，div应该代表不同的部分。它们将具有不同的样式和元素，并从服务器传递适当的数据。正因为如此，我希望使用html或模板，而不是在AJAX中成功使用字符串进行输出。这有意义吗？
您的
$。ajax
请求将发送查询中的数据，如
http://localhost:3000&redClicked=true
，这被解析为服务器上的
{redClicked:“true”}
。这是一个字符串，不是布尔值。尝试将
req.query.redClicked==true
更改为：
req.query.redClicked==“true”
，这对我很有帮助，但现在我遇到了另一个问题。我得到了合适的控制台，但它看起来像我的
2按钮。jade
是唯一出现的。我之所以能说出来，是因为我尝试用render将数据传递给div中的另外两个，但它们没有显示在lick上。我做了进一步的研究，当我在
2按钮中拿走两个div时，jade
没有一个div像它应该的那样出现。当我点击一个按钮时，我在AJAX调用的控制台中得到一个空对象，屏幕上没有显示div。对此有什么建议就好了
html
head
    script(src="jquery.js")
    script(src="twoButtons.js")
body
    h1 test
    button#displayBlue Blue
    button#displayRed Red

    div(style="background:blue; width:400; height:400;")#blue Blue
    div(style="background:red; width:400; height:400;")#red Red