如何使用 Node.js 和 Express 在 JavaScript 中使用 GET 请求更改页面？答案

【问题标题】：How to make page change with GET request in JavaScript with Node.js and Express?如何使用 Node.js 和 Express 在 JavaScript 中使用 GET 请求更改页面？
【发布时间】：2017-08-09 05:04:55
【问题描述】：

在这个应用程序中，用户有一个可以输入数据的表格。每行都有一个“编辑”按钮，当他们单击该按钮时，我想将他们带到一个名为“/update”的新页面，他们可以在其中修改该行中的值。

我现在有了它，这样当他们单击更新按钮时，它会运行 editRow 函数，传递表的 ID 和行中的数据。但是，我无法弄清楚如何让路线正常工作。

我正在使用 Node.js、Express、Handlebars 但没有 jQuery。

app.js（服务器端）

app.get('/update', function(req,res){
    var context = {};
    context.tableID = req.ID;
    context.element = req.element;
    res.render('update', context);
});

update.handlebars

<h1>test for now</h1>

main.handlebars

<!doctype html>
<html>
<head>
    <title>Workout Tracker</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="scripts/buttons.js" type="text/javascript"></script>
</head>
<body>
    {{{body}}}
</body>
</html>

buttons.js（客户端）

function editRow(tableID, element) {

    var httpRequest;

    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
    }

    httpRequest.open('GET', 'http://localhost:3000/update');
    httpRequest.send();
};

使用上面的新配置，我现在可以访问/update 代码，但似乎没有出现render。服务器或客户端控制台中没有错误消息。

【问题讨论】：

您的应用程序的期望行为是什么，它的实际行为是什么？有错误输出吗？
目前我只是想显示“暂时测试”。如果我能走到那一步，我应该没问题。使用上面的当前配置，当我单击启动 editRow 功能的按钮时，页面不会改变。我不太擅长路由，所以我确定我的buttons.js 文件有很多错误。

标签： javascript node.js express asynchronous handlebars.js

【解决方案1】：

正如您的错误所说，XMLHttpRequest 对象上没有 get 函数。我想你的意思是改用req.open。

您可以参考此文档，该文档将向您展示如何使用 XMLHttpRequest 进行请求：https://developer.mozilla.org/enUS/docs/AJAX/Getting_Started#Step_3__A_Simple_Example

【讨论】：

感谢您提供的有用链接！我已经使用我学到的知识更新了我的代码，但我仍然无法让新页面呈现。我不确定为什么。我已经更新了上面的代码以反映我的更改。