如何在同一弹出框中要求用户输入并返回结果？

Question

流程如下：

1. User clicks on a button and a pop up box will be displayed
2. User will be required to enter a pincode in the pop up box
3. Server will search the database and return the results
4. Display the results in the same pop up box as step 1. 

我目前在步骤4中遇到困难，该步骤在同一弹出框中显示结果。

弹出框的html代码：

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Enter Pincode</h4>
      </div>
      <div class="modal-body">
        <p>Please request for the pincode from the customer.</p>
        <form class="form-horizontal" method="POST" action="/users/home/dashboard" role="form">
          <div class="form-group">
            <label  class="col-sm-2 control-label">Pincode:</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" 
                name="pinCode" placeholder="Pincode from customer"/>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Confirm</button>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

当用户单击提交时，我将运行以下node.js代码：

   var sql = "SELECT * FROM customers WHERE pincode = ?";
      db(function(err,conn){
        conn.query(sql,[pinCode],function(err,results){
          if(err){
            console.log("Error at dashboard:" + err);
            //res.render('dashboard',{data:results});
          }else{
            console.log(results);
          }
        });
      });

问题是如何从同一弹出框中包含客户详细信息的服务器返回results ？

Answer 1

取而代之的是使用AJAX使用表单进行发布。 在.success上，获取PIN并使用返回的数据更改模式文本。

示例（向您的表单添加一些ID，例如“ form-horizo​​ntal1”，然后在按钮点击时调用POST：

$.post( "/users/home/dashboard", $("#form-horizontal1").serialize(), function( data))
  .done(function(data) {
    $(".modal-body").html(data);
  });