【问题标题】:Nodejs very simple Form with Routes failing to postNodejs非常简单的表单,路由无法发布
【发布时间】:2015-01-12 13:58:37
【问题描述】:

我在 NodeJS/ExpressJS 应用程序中有一个超级简单的表单,但无法发布。

app.js 代码(我称之为 server.js)如下所示。

var express = require('express');
var fs = require('fs');
var path = require('path');
var urlEncoded = require('urlencoded-request-parser');

var bodyParser = require('body-parser');

var server = express();
var port = process.env.port || 1337;

server.use(urlEncoded());
server.use(bodyParser.urlencoded({extended: true}));

var routePath="./routes/"; 
fs.readdirSync(routePath).forEach(function(file) {
    var route=routePath+file;
    require(route)(server);
});

server.set('view engine', 'ejs');
server.set('views', __dirname);
server.listen(port);

我的帖子表单(post.ejs)

<form method="post" action="post-put"> 
    <fieldset>

        <!-- Form Name -->
        <legend>Which Test Type</legend>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-2 control-label" for="TestType">Please test our</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="TestType-0">
                    <input type="radio" name="SoftwareTestType" id="TestType-0" value="SoftwareTest" checked="checked">
                    Software
                </label> 
                <label class="radio-inline" for="TestType-1">
                    <input type="radio" name="HardwareTestType" id="TestType-1" value="HardwareTest">
                    Hardware
                </label>
            </div>
        </div>
    </fieldset>
    <input type='submit' class="btn btn-default" id='submit' value='Submit your Test'/>
</form>

结果显示在这个页面(post-results.ejs)

<%= Test %>

我有两条路线(post-get.js)

module.exports = function(server){

    server.get('/post', function(req,res){
        res.render('./views/test/post.ejs',{            
        });
    });
}

和(post-puts.js)

module.exports = function(server){
    server.post('post-put', function(req,res){
        console.log("In Submission POST")
        var TestType = "";
        if(req.body.HardwareTestType == true) 
            TestType = "Hardware";
        else
            TestType = "Software";

        res.render('./views/test/post-results.ejs',{
            Test: TestType
        });
    });
}

当我点击提交按钮时,开发者工具会显示:

这让我发疯了。有谁知道如何将结果发布到 post-results.ejs 文件。应用程序的文件系统布局如下所示:

更新: 表单和路由器都具有相同的“post-puts”路径。 在 post-puts 路由中有一个 console.log() ...但它没有被调用。 我认为它仍然可能是如图 2 所示的应用程序类型(开发人员工具) 当一个“东西”只有一个功能时,说它不起作用是具体的——如果我能更具体一点,我会知道问题出在哪里并解决它。

【问题讨论】:

    标签: javascript node.js express routes form-submit


    【解决方案1】:

    此 HTML URL 路径 &lt;form method="post" action="/post-put"&gt; 与您的代码 server.post('/test/post-put' 中的此路径不匹配。让它们匹配,它就会起作用。

    【讨论】:

    • 它们现在都是“/Post-Put”,但仍然不起作用。对不起,可能是编码类型吗?
    • 除了“不起作用”之外,您还需要具体说明。您是否尝试过console.log(req.body); 作为调试技术?您是否考虑过找到一段工作示例代码并根据您的目的对其进行修改?
    • 查看更新的问题 - 有示例代码,但我没有看到使用子文件夹路由。所以当然我已经查看了示例代码,代码显示了 console.log 调试技术。
    【解决方案2】:

    从后置中删除斜线

    <form method="post" action="post-put"> 
    

    【讨论】:

      【解决方案3】:

      已解决

      上述问题的解决方法如下。

      1) 我在 Action 和 Route 文件中将路由改回“/post-put”。 2) 我在表单中添加了 enctype="multipart/form-data"。

      所以表单现在看起来像

      <form method="post" action="/post-put" enctype="multipart/form-data"> 
          <fieldset>
      
              <!-- Form Name -->
              <legend>Which Test Type</legend>
      
              <!-- Multiple Radios (inline) -->
              <div class="form-group">
                  <label class="col-md-2 control-label" for="TestType">Please test our</label>
                  <div class="col-md-4"> 
                      <label class="radio-inline" for="TestType-0">
                          <input type="radio" name="TestType" id="TestType-0" value="SoftwareTest" checked="checked">
                          Software
                      </label> 
                      <label class="radio-inline" for="TestType-1">
                          <input type="radio" name="TestType" id="TestType-1" value="HardwareTest">
                          Hardware
                      </label>
                  </div>
              </div>
          </fieldset>
          <input type='submit' class="btn btn-default" id='submit' value='Submit your Test'/>
      </form>
      

      替代解决方案 保持表单 enctype 为enctype="application/x-www-form-urlencoded" 在 App.js(我的 server.js)中 删除app.use(bodyparser.urlencoded());app.use(bodyParser.urlencoded({extended: true})); 更改为server.use(bodyParser.urlencoded());

      现在表单的 POST 方法可以工作了! 感谢那些试图提供帮助的人。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-02-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多