在jade中更新页面的一部分？答案

【问题标题】：Update part of a page in jade?在jade中更新页面的一部分？
【发布时间】：2014-10-29 09:03:49
【问题描述】：

我正在尝试进行搜索并将结果发送回同一站点，我可以进行搜索，但无法将结果发送回。我希望起始站点在不重新加载页面的情况下呈现信息。

如何将搜索结果发送回 index.jade 页面而无需更新？

function pagelist(items, res) {
    var document='';
    var db = db_login;
    if ( items != null){
            items.forEach(function(item) {
            document += '<a href=share/'+item._id+' class="searchElement">'
            document += item.document 
            document += '</div>'
        })
        if(document != ''){
            res.send(document);
        }else{
        }
    }
}

index.jade

extends layout
block content
    block child

child.jade

extends index
block child
    !{document}

【问题讨论】：

您是在客户端也使用jade，还是只在服务器上使用？如果没有，您也必须将其包括在内。或者您可以在服务器上将结果呈现为 html，然后通过 .innerHTML = value 在客户端上进行设置
客户端也没有
那么，为什么你的pagelist函数会发回html呢？您是否打算将其更改为发回 JSON？
真的，我不是这个意思
但这并不能解决这个问题

标签： javascript node.js pug

【解决方案1】：

你可以这样做：

首先，您可以像这样更新您的index.jade：

extends layout
block content
    #content
        block child

然后，您应该调用某种函数来获取结果。我会称之为getResults。在该函数的回调中，您现在可以执行以下操作：

getResults(function(results){
    document.getElementById("content").innerHTML = results;
});

希望对你有帮助。

更新

我给你一个完整的例子：

server.js

var express = require("express");

var i = 0;
function getResults(cb){
    cb("<div>Result "+(i++)+"</div><div>Result "+(i++)+"</div><div>Result "+(i++)+"</div>");
}

var app = express();
app.set("view engine","jade");
app.get("/",function(req,res){
    getResults(function(results){   
        res.render("page",{results:results});
    });
});
app.get("/results",function(req,res){
    getResults(function(results){       
        res.writeHead(200,"OK",{"Content-Type":"text/html"});
        res.end(results);
    });
});

app.listen(80);

views/page.jade

doctype html
html
    head
        script.
            function update(){
                var req = new XMLHttpRequest();
                req.open("GET","/results");
                req.onreadystatechange = function(){
                    if(req.readyState == 4){
                        document.getElementById("content").innerHTML = req.responseText;
                    }
                }
                req.send();
            }
    body
        #content!= results
        input(type="button",value="Update",onclick="update()")

使用node server.js 运行它并访问本地主机。你应该从中学习它是如何完成的；）

【讨论】：

这就是我想做的，事情是我必须从服务器端做，我不知道如何在不更新网站的情况下将信息发送到客户端。
我不确定我是否理解你。您无法从服务器更新您的客户端。客户端必须使用它从服务器请求的数据来更新自己。您必须从客户端到服务器的 XMLHttpRequest 加载数据。我会用一个例子来更新我的答案。
...你知道，如何在客户端执行 JavaScript 对吗？
是的，只要我可以访问客户端的数据就可以了，:)
您是否使用了路由框架，例如 express？我想我必须给你一个完整的例子。