如何在同一彈出框中要求用戶輸入並返回結果？

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);
  });