javascript - Node.js : Make a response on the same page (update the page)

Question

我有这样的场景:客户提交表格。Node.js 通过其适当的路径“捕获”表单提交并开始缓慢的计算。计算会创建一些必须传递给客户端的数据。

在这里我可以选择执行 res.render() 并向客户端渲染一个新的 html 文件。

如果我想让数据(字符串或字符串数​​组)对同一页面上的客户端可见怎么办？

我可以用 res.json() 来做到这一点吗？如果是，客户端和服务器端的代码结构如何？

Answer 1

• 客户端(jquery)

$(".submit").click(function(){
    var status = "submit";
    var userObject= {
        firstName: "<%= ['firstName'] %>",
        lastName: "<%= ['lastName'] %>",
        subject: "<%= ['subject'] %>"
    }
    $.ajax({
        url: "http://localhost:3000/yourUrl",
        type: "POST",
        data: JSON.stringify({status:status, userObject:userObject}),
        dataType: "json",
        contentType: "application/json",
        success: function(result){
            alert(result.status);
        },
        error: function(result){
            alert("error");
        }
    })
})

• 服务器端 (node.js)

app.post("/yourURL", function(req,res){

    console.log("working")

    var status = JSON.stringify({
        status: req.body.status,
        userObject: req.body.userObject
    })

    console.log("status: " + req.body.status)

    const options = {
        hostname: "localhost",
        port: 3000,
        path: '/postWhichRenderthePage',
        method: 'POST',
        headers: {
            'content-type': 'application/json',
            'accept': 'application/json'
        }
    };

    console.log(status);

    const reqs = http.request(options, (res) => {
        res.setEncoding('utf8');
        res.on('data', (chunk) => {
            console.log(`BODY: ${chunk}`);
        });
        res.on('end', () => {
            console.log('No more data in response.');
        });
    });

    reqs.on('error', (e) => {
        console.error(`problem with request: ${e.message}`);
    });

    // write data to request body
    reqs.write(status);
    reqs.end();
    res.status(200).send(JSON.stringify({status: req.body.status}));
})

供大家引用如何使用ajax https://www.w3schools.com/xml/ajax_xmlhttprequest_response.asp