javascript - 将请求发送到 NodeJS 后端

标签 javascript jquery json node.js

我目前正在尝试将 json 数据发布到 json 文件。为了做到这一点,我设置了一个 NodeJS 和 Express 服务器,但有些东西总是搞砸。我不断收到这样的反馈:

jquery-3.2.1.js:9566 POST http://localhost:3000/Alpha/json/details.json 404 (Not Found)

我阅读了其他几个问题,指出问题可能出在我的服务器端脚本中,并且我没有正确指定 json 文件。

JS 客户端发布脚本:

function sendFormData(){
            var formData = JSON.stringify($("#myForm").serializeArray());

            $.ajax({
                type: "POST",
                url:"../json/details.json",
                data: formData,
                success: function(){
                    alert("something!");
                }
            });
        } 

我的 HTML 表单:

<form action="XXXXXXXX"id="myForm"><label for="id">ID</label>
    <input type="text" id="id" name="id" placeholder="Item ID number" ng-model="newDetails.id">

       <label for="system">System</label>
       <input type="text" id="system" name="lastname" placeholder="Type of System" ng-model="newDetails.system">

       <label for="date">Date</label>
       <input type="text" id="date" name="lastname" placeholder="dd-mm-yyyy"  ng-model="newDetails.date">

       <label for="priority">Priority</label>
       <select id="priority" name="priority" ng-model="newDetails.priority">
         <option value="high">High</option>
         <option value="medium">Medium</option>
         <option value="low">Low</option>
        </select>
        <label for="description">Description</label>
        <textarea class="form-control" rows="3" id="desc" name="description" ng-model="newDetails.description"></textarea>

        <label for="priority">Status</label>
        <select id="status" name="status" ng-model="newDetails.status">
          <option value="OPEN">OPEN</option>
          <option value="ON HOLD">ON HOLD</option
          <option value="CLOSED">CLOSED</option>
        </select>

       <input type="button" value="Submit" class="btn" data-dismiss="modal" style="background-color:#FFBE00; color:#002244;" onClick="sendFormData()">
</form>

NodeJS 脚本:

    var express = require('express');
    var app = express();
    var bodyParser = require('body-parser');
    var path = require('path');

    app.use(bodyParser.json());
    app.use('../json', express.static(path.join(__dirname, 'json')));
    app.use('/', express.static(__dirname + '/'));


    app.post('/formdata', function(req, res) {
        console.log( req.body.id + req.body.system + req.body.date + req.body.priority + req.body.description + req.body.status);
        res.send("ok");
    });

    app.use(bodyParser.json());

    // Get information submitted
    app.post('/', function(req, res) {
        console.log("Information received !");
        console.log(req.body);
        res.send("Ok!");
    });

app.listen(3000);

我的 Node 脚本工作正常吗?为什么找不到 json 文件?

root/Alpha/json/details.json - 是 json 文件路径

我的 Node 脚本位于根目录

最佳答案

我发现您对这里的很多事情感到困惑。我认为您应该先退后一步,了解绝对 URL 和相对 URL,然后才能了解如何修复代码。下面是有关如何解决此问题的建议,但如果您盲目应用这些建议,那对您没有任何好处。您需要了解为什么需要执行以下操作,否则稍后您将面临更多问题。了解 URL、路径和 HTTP:

至少阅读有关绝对和相对 URL 的构建方式、HTTP 请求中的路径发送内容、如何遍历文件系统以及什么 /..< 的基本信息. 的意思是。

现在,解决方案。

这没有任何意义:

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

因为您无法提供比根路径高一级的 URL。

当您在页面上时,例如从客户端访问 ../x/y.json http://www.example.com/a/b/c/index.html 那么客户端请求的实际上是http://www.example.com/a/b/x/y.jsonthis 是您需要在后端提供服务的内容。您实际提供的文件是另一回事,但这是您需要提供服务的路线。

我认为你需要重新考虑:

  1. .../ 在相对 URL 中的含义
  2. 您想要提供的实际 URL - 可以是任何内容,但您的客户端和服务器必须同意

有意义的是:

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

但如果您无论如何提供 __dirname 并且它已经包含 json 目录,那将是多余的:

app.use('/', express.static(__dirname + '/'));

顺便说一下,上面的内容可能只是:

app.use('/', express.static(__dirname));

但不建议(也不需要)为您的后端文件提供服务。您应该将所有静态内容放在一个目录中,例如称为 staticpublichtml 或其他名称,并通过以下方式提供此目录:

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

并将您的 json 目录放入该目录的内部

有关如何正确提供静态内容的更多信息和示例,请参阅以下答案:

关于javascript - 将请求发送到 NodeJS 后端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43683664/

相关文章:

javascript - 复选框代码不起作用

javascript - Ckeditor IE 的重复节点复制器功能

jQuery UI Datepicker 超出范围

javascript - 如何在 Rails 4 中测试 json 格式的 Action

javascript - 选择一项向下滑动

javascript - react 路由器中的链接未定义错误

javascript - 如何确保提交表单时不显示另一个(新)页面

Javascript垂直居中事件元素

json - 如何在 swift 4 中显示子 JSON 数据?

javascript - JSON stringify 在对象不为 null 时显示 null