在玉中更新页面的一部分?

问题描述

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

I'm trying to make a search and send back the result to the same site, I've got the search to work but I can't get the result to be sent back. I want the start site to render the information without page reload.

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

How can I send the search result back to the index.jade page without having to update it?

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}

推荐答案

您可以通过以下方式进行:

You can do it the following way:

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

First, you could update your index.jade like this:

extends layout
block content
    #content
        block child

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

And then, there should be some sort of function you call to get your results. I'll call it getResults.In the callback of that function you can now do the following:

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

希望能帮到你.

更新

我会给你一个完整的例子:

I'll give you a complete example:

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 运行它并访问 localhost.你应该从中学习它是如何完成的;)

Run it with node server.js and visit localhost. You should learn from it how it's done ;)

这篇关于在玉中更新页面的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！