使用 AJAX 将 result.php 提交到 bootstrap Modal

Posted 2023-03-21

【中文标题】使用 AJAX 将 result.php 提交到 bootstrap Modal

【英文标题】：Submit result.php into bootstrap Modal with AJAX

【发布时间】：2022-01-02 04:54:30

【问题描述】：

免责声明：我在过去 3 天检查了 *** 帖子，我找不到我的问题的确切答案，请在与已回答的问题链接之前阅读

---

问题 我有一个提交表单，用户提交一个USD 号码，它将转换为BTC。 问题是，用户将被重定向到一个新页面，即converter.php

解决方案 而不是重定向到新页面（到converter.php） 我们希望在提交后将 converter.php 的 AJAX 响应显示为模态。

index.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>

converter.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 检查回显响应

---

【问题讨论】：

创建一个将 USD 转换为 BTC 的函数，然后使用输入的转换值对该函数进行 AJAX 调用，之后您可以将转换后的值返回到模式中。

这段代码是否全部/部分/都不起作用？

代码工作，使用 index.php 和 converter.php ，它将提交表单并重定向到 converter.php 显示结果，我希望这个结果显示到带有 AJAX 的模式中

@BensonOkello 一个带有 Js 的函数？一些指针会对此有所帮助

你能在检查元素的网络选项卡中显示你得到的东西吗？

【参考方案1】：

将您的输入类型从提交更改为按钮以防止提交表单

【讨论】：

我试过了，但没用

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案2】：

当您使用 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中显示值了。 如果有进一步的困惑，你可以问。

【讨论】：

感谢您的回答先生，我不太确定如何从converter.php 获得回复以显示转换为模态，您愿意为我指明正确的方向吗？

是的，我检查了你的 converer.php 文件，你得到了内容字符串和值的整个响应组合。你可以在你的成功响应函数中喜欢这个 $("#bingo").html(response);

是的，这是正确的，我尝试了很多东西但无法工作，上面的两个代码示例（第一个和示例）都可以单独工作，但我无法让它们一起工作。

你能分享一下你从 ajax 成功函数得到的响应吗

你可以使用console.log(response);得到响应