Question

我有2个下拉菜单，这些菜单是使用SQL Server动态填充的。根据所选项目，我正在加载其他ejs模板。我已经使用AJAX进行了此操作。但是，我希望能够根据所选条件加载数据。例如，如果选择DD1作为Andrew，选择DD2作为Date，则该表应根据这些条件加载7列。

又名

SELECT * FROM exTable x WHERE x.Name = 'Andrew' and x.Date = '4/22/2019'

我已经尝试过的是将所选项目从下拉列表传递到路由器，就像这样：

router.js

router.post('/selection', async (req, res) =>{
  try {
    var nameFromDB = await conn.query("SELECT DISTINCT pr.Name FROM WFS.Table1 pr WHERE pr.Group = 'Test'");
    var dateFromDB = await conn.query('SELECT r.Date FROM WFS.Table2 r');
    var tables = ("SELECT * FROM WFS.view v WHERE v.Date= '" + req.body.Dates + "' AND v.Name = '" + req.body.Names + "'");
    console.log("SELECT * FROM WFS.view v WHERE v.Date= '" + req.body.Dates + "' AND v.Name = '" + req.body.Names + "'");
       res.render('selection', {tables: tables, nameFromDB : nameFromDB , dateFromDB: datesFromDB});
    } 
      catch (err) {
        res.status(500)
        res.send(err.message)
    }
 });

这是console.log的输出：

SELECT top 100 * FROM WFS.view_workRequests_Extended v WHERE v.Revenue_Release_Id = '04/16/2019' AND v.Development_Manager = 'Andrew'

app.js

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
  }));
app.use('/', router);

index.ejs

<script>
 $(document).ready(function() {
   $('#DDD').on('change', function(event) {
     var selectedDate = $('#selections option:selected').val();
   });
   $('#DDN').on('change', function(event) {
     var selectedName = $('#selection option:selected').val();
   });

   $('#submitData').on('submit', function(e){
     e.preventDefault();
     $.ajax({
       type: "POST",
       url: "/selection",
       data: {selectedDate : selectedDate, selectedName : selectedName },
       success: function() {
         alert('success');
       }
     });
   });
 });    
</script>
<form action="/selection" method="POST">
  <select class="DateDD" id="DDD" name="Dates">
    <% for(var n=0; n < dateFromDB.recordset.length; n++) { %>
      <option><%= dateFromDB.recordset[n].Date%></option>
    <% } %>
  </select>
  <select class="NameDD" id="DDN" name="Names">
    <% for(var n=0; n < nameFromDB.recordset.length; n++) { %>
      <option><%= nameFromDB.recordset[n].Name%></option>
    <% } %>
  </select>
  <input type="submit" name="Submit" id="submitData" class="btn btn-primary" value="View Report" />
</form>

selection.ejs

包含与INDEX.EJS相同的内容（除了脚本标记），而且...

<table class="table table-bordered table-condensed table-striped">
  <% for(var n=0; n < tables.recordset.length; n++) { %>
    <tr>
      <td><%=tables.recordset[n].Name%></td>
      <td><%=tables.recordset[n].Date%></td>
      ....
      ....
    </tr>
  <% } %>
</table>

在index.ejs上提交表单后，将抛出此错误：

日期未定义

我不知道是什么原因导致此错误，因为我可以在正在打印的控制台中看到名称和日期。任何帮助将不胜感激，谢谢！

Answer 1

您已经拦截了onsubmit事件并修改了names发送的数据ajax

$.ajax({
  type: "POST",
  url: "/selection",
  data: {selectedDate : selectedDate, selectedName : selectedName }, // <-- here
  success: function() {
    alert('success');
  }
});

因此，您在req.body中读取了错误的属性。您应该改为：

// for date
req.body.selectedDate
// for name
req.body.selectedName

您也要求

我可以在控制台中看到名称和日期

您输入的控制台输出与相关代码中的查询不匹配。

Answer 2

这是基本的调试问题。我可以建议您做几件事：

检查浏览器devTools（network tab），以查看主体有效载荷是否正在传递到服务器。
在服务器（快速）上，您是否使用主体解析器中间件？查看更多here（要求正文部分）。
尝试以检查模式运行nodejs并附加您的IDE（VSCode是一个不错的选择）并添加一些断点。或者，您可以执行一些console.log来检查您从客户那里得到什么。
您可以使用postman模拟浏览器请求，以检查服务器端并确保其正常运行。

Answer 3

这是一个简单的错误，没什么大不了的，令人沮丧。

我看到您使用日期，日期，日期和日期。我会寻找行号参考来给我一个线索。我将使用chrome和开发人员工具或console.log来查看我能得到的东西。

或者，我将使用不同的名称约定，例如date1，date2，date3，date4或更具描述性的名称，因此我可以确定哪个日期是正确的，然后缩小错误范围，会容易得多修理。

未定义req.body.Dates

3 个答案: