nodejs与JQ结合（后端数据发给前端）
2019-03-29 本文已影响0人
benbensheng
交互过程
前端jq调用ajax的get发送请求到/new地址，后端检测到/new，发送数据，前端回调函数收到函数
nodejs代码
/nodejs与jq的结合(后端给前端数据)
var express=require("express");
var app=express();
var NewsData=[{
"title":"benbenbenebeneb",
"date":"2019-3-29",
"autor": "zhoubenben",
"detail":"www.baidu.com",
"content":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
},
{
"title":"benbenbenebeneb",
"date":"2019-3-29",
"autor": "zhoubenben",
"detail":"www.baidu.com",
"content":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
},
{
"title":"benbenbenebeneb",
"date":"2019-3-29",
"autor": "zhoubenben",
"detail":"www.baidu.com",
"content":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
},
{
"title":"benbenbenebeneb",
"date":"2019-3-29",
"autor": "zhoubenben",
"detail":"www.baidu.com",
"content":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
},
]
//将有html文件的文件夹设置为静态路由
app.set("view engine","ejs");
app.use(express.static("./public"));
app.get("/news",function(req,res){
console.log(1);
res.json(NewsData);
})
app.listen(3000);
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./jquery.min.js"></script>
<title>Document</title>
<style>
.header{
background-color:#ccc;
height: 200px;
width: 980px;
margin: 0 auto;
}
.content{
width: 980px;
margin: 0 auto;
margin-top: 5px;
}
.main{
width: 760px;
float: left;
margin-right: 20px;
}
.aside{
width: 200px;
background-color:#ccc;
height:500px;
float: left;
}
.grid{
padding: 10px;
border: 1px solid #333;
margin-bottom: 10px;
border-radius: 10px;
box-shadow: 1px 1px 1px #333;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="main">
</div>
<div class="aside">
</div>
<script type="text/javascript" id="model">
<div class="grid"> //将模板放于script标签，html无法解析
<h3><%= title %></h3>
<p>发布时间：<%= date %> 作者：<%= autor %></p>
<p><%= content %></p>
<p><a href="<%= detail %>">详细信息</a></p>
</div>
</script>
<script src="./underscore-min.js"></script>
<script type="text/javascript">
var gridString= $("#model").html()
var compiled = _.template(gridString);
$.get("/news",function(data,status){
for(var i=0;i<data.length;i++){
var compiledString=compiled(data[i]);
$(".main").append($(compiledString)); //$(compiledString)用于封装成jq对象
}
})
</script>
</div>
</body>
</html>
underscore的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Document</title>
<style>
.header{
background-color:#ccc;
height: 200px;
width: 980px;
margin: 0 auto;
}
.content{
width: 980px;
margin: 0 auto;
margin-top: 5px;
}
.main{
width: 760px;
float: left;
margin-right: 20px;
}
.aside{
width: 200px;
background-color:#ccc;
height:500px;
float: left;
}
.grid{
padding: 10px;
border: 1px solid #333;
margin-bottom: 10px;
border-radius: 10px;
box-shadow: 1px 1px 1px #333;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="main">
</div>
<div class="aside">
</div>
<script type="text/javascript" id="model">
<div class="grid">
<h3><%= title %></h3>
<p>发布时间：<%= date %> 作者：<%= autor %></p>
<p><%= content %></p>
<p><a href="<%= detail %>">详细信息</a></p>
</div>
</script>
<script src="./underscore-min.js"></script>
<script type="text/javascript">
var NewsData={
"title":"benbenbenebeneb",
"date":"2019-3-29",
"autor": "zhoubenben",
"detail":"www.baidu.com",
"content":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容,内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
}
var gridString= $("#model").html()
//调用template编译html代码
var compiled = _.template(gridString);
//将数据传入编译好的代码
var compiledString=compiled(NewsData);
alert($(compiledString));
$(".main").append($(compiledString)); //$(compiledString)用于封装成jq对象
</script>
</div>
</body>
</html>
登陆时候将信息返给jq
<input type="text" name="title" id="fileName">
<button id="btn">发送</button>
<script>
$(function(){
$("#btn").click(function(){
var fileName = $("#fileName").val();
$.get("./doget",{'fileName':fileName},function(data,status){
var dataJson=JSON.parse(data);
alert(dataJson.name);
});
})
})
</script>
//nodejs与jq的结合(前端给后端数据)
var express = require("express");
var app=express();
app.set("view engine","ejs");
app.get("/fileName",function(req,res){
res.render("jqSendData");
})
app.get("/doget",function(req,res){
res.send('{"name":"ben","age":12}');
})
app.listen(3000);
