单击提交按钮后，如何通过快速节点在当前窗口中的框中获取结果？

Question

当我单击提交按钮时，我无法通过 node 和 express 获得响应。我对节点和表达相当陌生。这是我尝试过的。你能告诉我我的代码有什么问题吗？请指导我如何在当前 html 的框中获得即时响应，或者有什么其他方式来获得响应而不是异步功能？

<p class="borderBox"></p>

Answer 1

如果没有看到您的所有代码，很难说。但我认为第一个问题是你没有足够防御性地检查你的 req.headers kvps。某些标头并不总是出现在请求中，因此您需要提供它们未按预期到达的情况

     if (req['x-forwarded-for']) {
         var ip = req['x-forwarded-for'].split(',')

或

     req['x-forwarded-for'] = req['x-forwarded-for'] || ''

更新

根据你提供的代码，先对你的server.js代码做如下修改：

app.get('/headers', function(req, res) {
    if (req.headers['x-forwarded-for'])
        var ip = req.headers["x-forwarded-for"].split(',')[0];
    if (req.headers['accept-language'])
        var lang  = req.headers['accept-language'].split(',')
    if (req.headers['user-agent'])
        var sys = req.headers['user-agent'].match(/\((.+?)\)/)[1]


    var obj = {
        "IP Address": ip,
        "Language" : lang,
        "Operating System": sys
    }

    // res.json(obj);
    res.set('Content-Type', 'application/json');
    res.status(200).send(obj);
});

然后，您必须更改使用 fetch() 调用的 URI，以便它到达您在上面在 app.get() 中指定的端点（即“/headers”）。我在端口 3000 上使用 localhost。

$("#submit").submit(async function(event) {
    event.preventDefault();
    // const response = await fetch(window.location.href);
    const response = await fetch('http://localhost:3000/headers');
    const data = await response.json();
    document.getElementsByClassName('borderBox')[0].innerText = JSON.stringify(data);
});

最后，我对您的项目设置了解不多，但这是我通过使用 express 提供 index.html 文件的方法

app.use(express.static(path.join(__dirname, 'public')));

并将index.html 放在express 应用程序根目录下名为/public 的目录中。文件index.html 如下：

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<p>
    Please click to get the IP address, language, and operating system for your 
device.
</p>

<form id="submit">
    <button type="submit">Submit</button>
</form>


<p class="borderBox">    </p>

<script>
    $("#submit").submit(async function(event) {
        event.preventDefault();
        // const response = await fetch(window.location.href);
        const response = await fetch('http://localhost:3000/headers');
        const data = await response.json();
        document.getElementsByClassName('borderBox')[0].innerText = JSON.stringify(data);
    });
</script>

我只包含最后一部分，因为我再次看不到您是如何设置项目的 - 但这对我有用。