我想制作单页应用。简化我的想法:首先在"/"
上将是一个带有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。