Ajax

NodeJs中Ajax传值问题

nodejs中ajax传值问题

最近在做一个资讯类的网站

打算使用layui+nodejs+mongodb去实现这个网站

  • nodejs不用多说，各种模块，各种包，随取随用
  • mongodb比mysql简单，而且不用去设置类型，长度，可以节约大量开发时间，提高效率

开发中遇到了一个小问题就是关于页面传值问题

一.使用场景如下：

  • 页面一获取数据库中所有的文章信息，并在前台循环显示，只打印标题和作者
  • 用户点击标题（每个标题都有a链接），跳转到文章详情页面，查看具体文章内容

二.具体逻辑分析：

  • 页面一每个标题都有循环打印的文章的id
  • 点击后将id值以get方式传递，并使用ajax在数据库中查询匹配id的文章，并返回结果
  • 页面二接收返回的结果，处理json数据后，打印文章内容

三.遇到的问题：

跳转，a标签链接跳转后，怎么让页面二获取id值

试了好几种方法，差点把电脑砸了，因为如果用php几行代码就搞定，顿时觉得nodejs一无是处无力吐槽。

没办法，自己选的语言哭着也要写完。

仔细研究了一下，发现其实也并不难。

1.首先设置一个接口/article，用来接收页面一的id

下图是页面1的ajax代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function showlist(){

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200)
{

var result=JSON.parse(xhr.responseText);

var htmlcode=" ";
for(var i=0;i<result.length;i++){

htmlcode+="<div id='item'><a href='/article?id="+result[i]["_id"]+"'>"+result[i].title+"</a><p>"+result[i].author+"</p></div>"
}
}

d1.innerHTML=htmlcode;
}
xhr.open("get","/list",true);
xhr.send();

}

2.然后执行数据库查询，设置一个全局变量data,将查询结果赋值给data,然后在最后设置一个重定向到页面二的地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var data;

var ObjectId = require("mongodb").ObjectId;
server.get("/article", (req, res) => {
  var $id = ObjectId(req.query.id);
  MongoClient.connect(url, (err, db) => {
    var dbo = db.db("local");
    dbo.collection("article").find({
      _id: $id
    }).toArray((err, result) => {
      if (err) {
        throw err;
      }
      data = result[0];
      res.redirect("/article.html?id=" + $id);
      db.close();
    });

  });
});

3.为第二个页面写一个接口/show,给页面二传递数据id

1
2
3
server.get("/show", (req, res) => {
  res.send(data);
});

4.页面二，使用ajax接收到data后打印即可

这里几个关键点就是:

1）设一个全局变量存储id的值

2）还有就是ajax也可以什么数据都不发送，只用来获取数据

3）如果打印不出内容，看看自己是否已将传过来的字符串转化为json对象，如果没有用JSON.parse(数据)即可

当然可能还有其他更好的办法，以后想到再更新哈哈