Question

我正在尝试进行搜索并将结果发回给同一个网站，我已经让搜索工作但我无法将结果发送回去。我希望启动站点在没有页面重新加载的情况下呈现信息。

如何将搜索结果发送回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}

Answer 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);

<强>视图/ 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。你应该从中学习它是如何完成的;）

用玉石更新页面的一部分？

1 个答案: