重定向后获取数据

Question

我有一个页面“/订单/新”，其中包括 2 个用于客户及其地址的下拉菜单和一个重定向以选择要添加到订单的产品的按钮，我将产品放在一个数组中并将该数组传递给'/order/new'..但是当我重定向时，我没有得到选定的客户及其地址..我保存将按顺序添加到名为 hh 的全局数组中的产品，它从 ajax 获取数据

我想在添加产品数组后获取客户及其地址

global.hh = new Array();

module.exports = {

getProduct: (req , res ) => {
  var products = req.query.selectedProduct;
  var total = req.query.sumTotal;
 var btekh = hh.push(products)
}
getOrderProduct: (req , res) => {
  let query1 = "SELECT * FROM `product`";
  getConnection().query(query1 ,(err , result) => {
    if(err) {
     return res.status(500).send(err);
    }
    res.render('productOrder.ejs' , {
      products: result
    });
  });
},
addOrderProduct: (req, res) => {
  res.redirect('/order/new')
}


postOrder: (req ,res) => {
  var products = req.session.products;
    getConnection().query('INSERT INTO `order` ( clientId , addressId,orderStatusId) VALUES (?,?,?)', [req.body.selectUser, req.body.selectAddress,req.body.selectedStatus], (err,result) => {
    if (err) {
      console.log(err);
    }
  hh.slice(-1)[0].forEach(function (item) {
    let insertedOrder = result.insertId;
    let query = "INSERT INTO `orderProduct`( `orderIdProduct`, `productId`, `orderProductName`,`orderProductPrice`, `orderProductQuantity`, `orderProductTotal`) VALUES (?,?,?,?,?,?)";
    getConnection().query( query , [insertedOrder,item.check,item.name,item.p,item.q,item.total] , (err , result)=>{
      if (err) {
        console.log(err);
      }
      res.end();
  })
})
})
}
  res.redirect('/')
}
app.get('/order/new' , addOrderPage)
app.use('/postOrder' , postOrder);
app.use('/order/product' , getProduct);

我的 ajax 代码：

////////////////add users's address///////////////////////////
 $('#user').change(function(){

    var item = $('#user').val();
    $.ajax({
        type:'GET',
        data: { selectedId: item },
        url:'/users/address',
        success: function(data){
             $('#address').empty();
         $('address').append("<option disabled selected> Select Address..</option>");
         $.each(data, function (index, addressObj) {
                $('#address').append("<option value = '" + addressObj.addressId + "' > " + addressObj.addressName + " </option > ");
            });
        }
    });
   })

;
//////////////get the product to order/////////////
     $('#save').click(function () {
        var orderProduct = new Array();
        $("#table input[type=checkbox]:checked").each(function () {
                      var row = $(this).closest("tr");
                      var message0 = row.find('#check').val();
                      var message1 = row.find('.name').text().trim();
                      var message3 =  row.find('.currency').text().trim();
                      var message4 =  row.find(".foo").val();
                      const result =  {check: message0,name: message1,p: message3,q:  message4 ,total: message3 * message4}
                      var hh = orderProduct.push(result);
                });
                console.log(orderProduct);
                var totalPrice = 0;
             orderProduct.forEach(function (item , index) {
                totalPrice = totalPrice + item.total
              })
              $.ajax({
                type: 'GET',
                data: {selectedProduct: orderProduct , sumTotal: totalPrice},
                url: '/order/product',
                success: function (data) {
                  console.log(data);
                }
              })
               })

'/new/order' 我的 ejs：

<header>
        <h2>New Order : </h2>
      </header>
      <form action="/postOrder" method="post" id="newForm" >
        <label> User Name:</label>
        <select name="selectUser" id="user" >
          <option disabled selected> Select User..</option>
      <% users.forEach((users) => { %>
        <option value="<%= users.id %>"  > <%=users.name %> </option>
        <%  })  %>
        </select>
        <br>
        <label>Address :</label>
        <select name="selectAddress" id="address">
          <option disabled selected> Select Address..</option>
      </select>
        <br>
        <label>Product</label>
      <a href="/orderProduct" id="addProduct"> add product</a>
        <br>
        <label>Status</label>
        <select name="selectedStatus">
        <% status.forEach((status) => { %>
            <option value="<%= status.statusId %>"> <%= status.statusText %></option>
        <%  })  %>
      </select>
      <br>
        <input type="submit" value="Save">
      </form>

Answer 1

在这些行中，

res.render('productOrder.ejs' , {
      products: result
    });

您是否已成功从数据库中取回所有产品？

因为在您的 AJAX 调用中，

$.ajax({
            type: 'GET',
            data: {selectedProduct: orderProduct , sumTotal: totalPrice},
            url: '/order/product',
            success: function (data) {
              console.log(data);
            }
          })

您正在发送数据，但未在此处的“查询 1”中使用它，

let query1 = "SELECT * FROM `product`";

我正在尝试了解您的程序。

所以用户访问您的网页，他们选择了一个产品，您的网页使用产品信息 ping 您的 REST 服务器，您的 REST 服务器 ping 您的数据库以查找该产品，然后该数据在此处呈现到此模板？

res.render('productOrder.ejs' , {
      products: result
    });

编辑：您必须处理与事件侦听器的用户交互以及使用某种存储方法的用户输入。

Your_client-side_JS_script.js

function handle_submit(e) {
  e.preventDefault();
  if (e.target.id === 'addProduct') {
    // When they click add product, you need to either pass their user details to the route and send them with the $.ajax GET request
    //... and keep track of the data like that
    // OR
    // track that data in a cookie,
    read up on cookies https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
  } else if (e.target.id === 'newForm') {
    console.log("Submit Form");
  }
};
$('#addProduct').on('click', handle_submit);
$('#newForm').on('submit', handle_submit);

我推荐cookie方法。您设置 cookie 一次，在需要时使用它，然后在完成后将其删除。

使用第一种方法，您必须在 fetch 中发送数据（不需要该数据来获取产品），然后您必须在整个后端管理该 user_data 以确保它不会获取丢失。工作量太大了。请改用 cookie 方法。