使用带有express的AJAX(请求后更改变量)

时间:2016-01-10 22:11:44

标签: javascript jquery node.js express pug

我想制作单页应用。简化我的想法:首先在"/"上将是一个带有2个按钮的显示部分的主页。当他们点击按钮1时,我们将从服务器检索数据并将其显示在显示部分的页面上,并对按钮2执行相同的操作,但是对于不同的数据。

我很难掌握如何放入正确的显示部分。

我知道你可以在Jade做条件:

    html
    head
        script(src ="http://code.jquery.com/jquery-2.1.1.js")
        script(src = "script.js")
    body
        p= test
        if test == "face"
            div.fillIn(style="background:blue; width:400; height:200")
        if age
            div.fillIn(style="background:red; width:400; height:200")
        button(value="send").send send

        button(value="change").change change

如何为年龄和测试输入不同的变量?在服务器中我在发布请求后更改变量时遇到问题。应该尝试这样做?

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){
    // if(age){
        res.render("index",{test: "fac", age: age })
    // }

})

//The server script that reads the paramater from the jQuery AJAX and returns the result
app.post("/some", function(req, res){
    console.log(req.body)
    age = req.body.age
    res.send(req.body.name + " and " +  req.body.age)
})
......

(我正在考虑这样做)。我想这样做,以便当点击按钮时它检索新数据并更新变量,这样我就可以将它传递给Jade,这样它就可以更新正确的显示

script.js中的

按钮内容

    $("button.send").on("click", function(){
        $.ajax({
            method : "POST",
            url : "/some",
            data : {name : Math.floor(Math.random() * 20), age :"42"},
            success : function(data){
                $(".fillIn").html(data)
            }
        })

编辑:  我想要做的是为2个不同的按钮分别进行2个不同的AJAX调用,每个按钮输出2个不同的数据,如上面data : {name : Math.floor(Math.random() * 20), age :"42"},另一个是data : {name : Math.floor(Math.random() * 20), age :"--->43<---"}。我认为这将填充.fillin div中的文本,但我不想只填写div我想要一个完整的其他fillin div。一个按钮将使div具有用户可以读取的其他特定文本(HTML)以及数据,而另一个按钮将对其他html元素和该特定数据执行相同操作。 我希望有一种传递模板的方法。这就是我试图通过拥有2个条件div来模拟的。我此刻并不想为特定用户做点什么。我只是想我是否可以为这两个按钮data : {name : Math.floor(Math.random() * 20), age :"42 | 43"},做。我传递了一个很长的数据,我想说明要显示哪个div。

0 个答案:

没有答案