使用 Ajax 将表单提交到节点后端

Question

我是节点新手，我正在尝试提交表单并通过 Ajax 传递数据并在节点后端处理数据。处理完数据后，应将数据发回并显示在 index.html 上。但是在发回任何数据之前，我已经在将数据发送到节点后端时遇到了问题。

此任务有限制。我被告知无需使用任何外部库（如 express、request 等）即可实现上述目标。

相信server.js、index.js、router.js都没有问题。但为了清楚起见，我在下面显示了它。 问题可能出在 ajax 代码和函数 convert{} 中。现在，我只是 console.logging 每个点的数据，以确保数据传递到节点。

下面是我的代码，奇怪的是我不知道为什么它不能正常工作，我已经花了很多时间。

我在命令行中收到来自请求处理程序文件中函数 convert{} 的消息“Hello World”。所以看起来 Ajax 至少在 xhr.open 上运行良好。但是console.log("Hello World");下面的代码没有执行（request.addListener）。然后它再次打开我的 index.html 文件，因为我的命令行显示“/”处理程序已执行。

非常感谢任何有关解决此问题的建议。谢谢！

index.html:

        <form method="post" id = "fform">
        <input type="checkbox" id="text1" name="number1" >
        <label for="text1"> Number 1</label><br />
        <input type="checkbox" id="text2" name="number2" >
        <label for="text2"> Number 2</label><br />
        <h4>Select a date</h4>
        <select id="text3" name="month">
            <option value="01">Jan</option>
            <option value="02">Feb</option>
            <option value="03">Mar</option>
            <option value="04">Apr</option>
            <option value="05">May</option>
            <option value="06">Jun</option>
            <option value="07">Jul</option>
            <option value="08">Aug</option>
            <option value="09">Sep</option>
            <option value="10">Oct</option>
            <option value="11">Nov</option>
            <option value="12">Dec</option>
        </select>
        <select id="text4" name="year">
            <option value="2009">2007</option>
            <option value="2009">2008</option>
            <option value="2009">2009</option>
            <option value="2009">2010</option>
            <option value="2009">2011</option>
            <option value="2009">2012</option>
            <option value="2009">2013</option>
            <option value="2009">2014</option>
            <option value="2009">2015</option>
            <option value="2009">2016</option>
        </select>
        <h4>Output Type</h4>
        <input type="checkbox" id="text5" name="table" >
            <label for="text5"> As a Table</label>
        <input type="checkbox" id="text6" name="graph" >
            <label for="text6">As a Graph</label><br /><br />
        <<button type="submit" onclick="return showData()" >Submit</button>

Index.html 脚本。 xhr.send 现在是一个字符串，用于测试目的。

<script>
    function showData() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST","./convert",true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send("foo=bar&lorem=ipsum");
    }
</script>

索引.js

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");

var handle = {};
handle["/"] = requestHandlers.reqStart;
handle["/convert"] = requestHandlers.convert;

server.startServer(router.route, handle);

Router.js

var url = require("url");

function route(pathname, handle, response, request) {
    console.log("Routing a request for: "+ pathname);

    if (typeof handle[pathname] === 'function') {
        handle[pathname](response, request);
    } else {
        console.log("Nothing found for: " + pathname);
        response.writeHead(404, {"Content-Type": "text/plain"});
        response.write("Resource cannot be found!");
        response.end();
    }
}
exports.route = route;

服务器.js

var http = require("http");
var url = require("url");

function startServer(route, handle) {
    function onRequest(request, response) {
        var pathname = url.parse(request.url).pathname;
        console.log("Requesting for " + pathname + " received.");   
        route(pathname, handle, response, request);
    }
    http.createServer(onRequest).listen(41075);
    console.log("Server is now started.");
}

exports.startServer = startServer;

requestHandler.js

var qs = require("querystring");
var fs = require("fs");
var url = require("url");

function reqStart(response, request) {
 //processing goes here to open index.html, code hidden, no problem here
}

function convert(request, response) {

    console.log("Hello World");

    request.addListener('data', function(dataChunk) {
        console.log("Received POST chunk'"+dataChunk+"'.");
        request.addListener('end', function() {
            console.log("You've sent: " + dataChunk);
            response.end();
        });
    });
}

Answer 1

onclick="return showData()"

当您使用这种 1990 年代的方法添加事件侦听器时，从函数返回 false 将阻止默认行为（即定期提交表单）到 action 属性中指定的 URL（或当前 URL如果没有action 属性）。

您正在返回 showData 的返回值。此函数没有return 语句，因此它返回undefined。

这并不妨碍常规的表单提交，所以在发起 Ajax 请求后，表单会提交并加载一个新页面（杀死运行 JavaScript 程序等待 Ajax 请求响应的页面）。

你需要return false。

---

一种现代方法是将您的事件侦听器与 JavaScript 绑定，并使用 preventDefault 方法停止表单提交：

const form = document.querySelector("form");
form.addEventListener("submit", showData);

function showData(event) {
    event.preventDefault();
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "./convert");
    const params = new URLSearchParams();
    params.append("foo", "bar");
    params.append("lorem", "ipsum");
    xhr.send(params);
}

Answer 2

不建议使用内联事件处理程序，当然也不建议在提交按钮上使用

由于您没有取消点击事件（通过在函数中返回 false），您将尝试 ajax 并同时提交

这是一个更好的方法

window.addEventListener("load",function() {
  document.getElementById("fform").addEventListener("submit",function(e) {
    e.preventDefault(); // stop submission
    let xhr = new XMLHttpRequest();
    xhr.open("POST","./convert",true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send("foo=bar&lorem=ipsum");
  }) 
})