使用AJAX將result.php提交到bootstrapModal

免責宣告：我在過去 3 天內查看了 stackoverflow 帖子，但找不到我問題的確切答案，請在鏈接已回答的問題之前閱讀

問題
我有一個提交表單，用戶提交一個USD數字，它將轉換為BTC.
問題是，用戶將被重定向到一個新頁面，即converter.php

解決方案
而不是重定向到新頁面 (to converter.php)
我們希望converter.php在提交后以 AJAX顯示回應到模態。

索引.php

                 <form action="converter.php" method="post">
                    <h1>USD to BTC - Converter</h1>
                    <p>
                      <label for="amount">USD amount</label>
                      <input type="text" name="amount" id="amount">
                    </p>
                    <p>
                      <label for="currency">Currency</label>
                      <select name="currency" id="currency">
                      <option value="USD">USD</option></select>
                    </p>
                    <p>
                      <input type="submit" name="submit" value="Submit">
                   </p>
                </form>

轉換器.php

例子

下面是一個非常相似的示例，說明我想在上面的代碼中實作什么??
（兩者都有效，我想將它們組合起來并以模態顯示 php 回應）

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<form id="form" method="post">
    <div id="userDiv"><label>Type a number</label>
        
         <input type="text" name="userId" id="userId"/> <br></div>
    <button type="button" id="btn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Send Data</button>
</form>


<!--modal-->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">MyModal</h4>
      </div>
      <div class="modal-body">
Here should echo response from the converter.php file
        <div id="bingo"></div>

      </div>
    </div>
   </div>
</div>


<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

<script>
    $(document).ready(function(){
        $("#btn").click(function(){
            var vUserId = $("#userId").val();
         if(vUserId=='')
         {
             alert("Please enter a num");
         }
         else{
            $.post("result.php", //Required URL of the page on server
               { // Data Sending With Request To Server
                  user:vUserId,
               },
         function(response,status){ // Required Callback Function
             $("#bingo").html(response);//"response" receives - whatever written in echo of above PHP script.
             $("#form")[0].reset();
          });
        }
     });
   });
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

您還可以將此示例與 result.php 配對以檢查回聲回應

uj5u.com熱心網友回復：

將您的輸入型別從提交更改為按鈕以防止提交表單

uj5u.com熱心網友回復：

當您使用 Ajax 提交請求在您的成功回應中，您首先需要打開模態，然后可以輕松地更改模態上的輸入。讓我向您展示代碼中的示例

<script>
$(document).ready(function(){
    $("#btn").click(function(){
        var vUserId = $("#userId").val();
     if(vUserId=='')
     {
         alert("Please enter a num");
     }
     else{
        $.post("result.php", //Required URL of the page on server
           { // Data Sending With Request To Server
              user:vUserId,
           },
     function(response,status){ // Required Callback Function
         $("#Your Model ID").modal('show') //this will open modal automaticaly
         //Now use response to display on modal
         $("#input_box_1_id").val(response.inputbox1_val);
         //You can also render html from response like this
         $("#intened_id").html(response.html_content);
      });
    }
 });
  });
</script>

這樣我們就可以自動打開modal并在modal中顯示值。如果進一步混淆，您可以詢問。

標籤：javascript php 查询 阿贾克斯 bootstrap-4

上一篇：提交表單成功后如何呼叫組件？

下一篇：如何將ajax陣列放入coldfusion變數？