Question

为了预处理来自浏览器的某些数据，我通过JS XHR调用从浏览器触发Express。问题在于浏览器显然未在服务器上显示Node / Express呈现的页面

与文件路径，视图等无关。通过单击浏览器中的对象调用其他EJS模板时，它们可以完美呈现。

HTML代码：

<button type='button' class='button' onclick='sendData()'>Action</button>

<script language='javascript'>
    function sendData() {
        var http = new XMLHttpRequest();
        const filename = document.getElementById('fileselect').files[0]; 
        // reads the file and pass it to the server as a string
        var reader = new FileReader();
        reader.readAsText(filename);
        reader.onload = function() {
            var fileContent = reader.result;
            var obj = 'file=' + fileContent;
            obj = encodeURI(obj);
            http.addEventListener('load', function (event) {
                //alert('Yeah! Data sent and response loaded.');
            });

            // Define what happens in case of error
            http.addEventListener('error', function (event) {
                alert('Oops! Something went wrong.');
            });

            http.open('POST', '/action', true);

    http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    http.send(obj);
</script>

节点：

app.post('/action', function(req, res){
//console.log(req.body);
const file = req.body.file;
// process the data
...
res.render("page.ejs");

Answer 1

page.ejs不会在浏览器中显示为响应

您没有做任何渲染。

Ajax的要点是您正在从 JavaScript 发出HTTP请求并处理响应。

您没有将浏览器导航到新页面。

如果您想对响应做一些事情（例如在页面中显示），则需要在此处进行操作：

        http.addEventListener('load', function (event) {
            //alert('Yeah! Data sent and response loaded.');
        });

数据将位于this.responseText中。

但是，如果您希望……那么您可能应该使用常规表单提交而不是完全不使用Ajax。

如果通过XHR从客户端JS函数调用Express，则不会在浏览器中呈现页面

1 个答案: