使用 AJAX 和 Bootstrap Modal 显示 PHP 转换结果-php教程-PHP中文网

使用 AJAX 和 Bootstrap Modal 显示 PHP 转换结果

霞舞

发布： 2025-10-19 13:10:01

原创

650人浏览过

使用 ajax 和 bootstrap modal 显示 php 转换结果

本文将指导你如何使用 AJAX 和 Bootstrap Modal 来显示 PHP 转换结果，而无需页面跳转。通过修改表单提交方式，利用 AJAX 将数据发送到 PHP 文件进行处理，并将返回的结果动态地显示在 Bootstrap Modal 中，从而提升用户体验。本文将提供详细的步骤和示例代码，帮助你实现这一功能。

实现步骤

修改表单提交方式：

首先，需要将 zuojiankuohaophpcninput type="submit"> 修改为 <button type="button">。这样可以防止表单的默认提交行为，从而允许我们使用 AJAX 来处理表单数据。

在 index.php 文件中，将以下代码：

立即学习“PHP免费学习笔记（深入）”；
```
<input type="submit" name="submit" value="Submit">
```
登录后复制
替换为：
```
<button type="button" id="submitBtn" class="btn btn-primary">Submit</button>
```
登录后复制

引入 Bootstrap 和 jQuery：

确保你的 index.php 文件中包含了 Bootstrap 的 CSS 和 JavaScript 文件，以及 jQuery 库。这可以通过 CDN 链接引入：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

登录后复制

创建 Bootstrap Modal：

在 index.php 文件中，添加 Bootstrap Modal 的 HTML 结构。这个 Modal 将用于显示 converter.php 返回的结果。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

<div class="modal fade" id="converterModal" tabindex="-1" role="dialog" aria-labelledby="converterModalLabel">
  <div class="modal-dialog" role="document">
    <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="converterModalLabel">Conversion Result</h4>
      </div>
      <div class="modal-body">
        <div id="converterResult"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

登录后复制

编写 AJAX 代码：

使用 jQuery 的 $.post() 方法，将表单数据发送到 converter.php 文件。在回调函数中，将返回的结果显示在 Modal 的 converterResult div 中，并显示 Modal。
```
$(document).ready(function(){
  $("#submitBtn").click(function(){
    var amount = $("#amount").val();
    var currency = $("#currency").val();

    $.post("converter.php", { amount: amount, currency: currency }, function(response){
      $("#converterResult").html(response);
      $("#converterModal").modal('show');
    });
  });
});
```
登录后复制
这段代码做了以下几件事：
- $(document).ready(function(){ ... }); 确保页面加载完成后执行代码。
- $("#submitBtn").click(function(){ ... }); 监听 submitBtn 按钮的点击事件。
- var amount = $("#amount").val(); 和 var currency = $("#currency").val(); 获取表单中的金额和货币值。
- $.post("converter.php", { amount: amount, currency: currency }, function(response){ ... }); 使用 AJAX 将数据发送到 converter.php。
- $("#converterResult").html(response); 将 converter.php 返回的结果显示在 converterResult div 中。
- $("#converterModal").modal('show'); 显示 Bootstrap Modal。

修改 converter.php (如果需要)：

确保 converter.php 返回的是可以直接显示在 HTML 中的内容。例如，可以使用 echo 输出 HTML 格式的结果。

<?php
// converter.php
$amount = $_POST['amount'];
$currency = $_POST['currency'];

// 进行转换计算 (示例)
$btc_value = $amount / 50000; // 假设 1 BTC = 50000 USD

echo "<p>USD: " . htmlspecialchars($amount) . "</p>";
echo "<p>BTC: " . htmlspecialchars($btc_value) . "</p>";
?>

登录后复制

注意: htmlspecialchars() 函数用于转义 HTML 特殊字符，防止 XSS 攻击。

完整示例

index.php:

<!DOCTYPE html>
<html>
<head>
  <title>USD to BTC Converter</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <form id="converterForm">
      <h1>USD to BTC - Converter</h1>
      <p>
        <label for="amount">USD amount</label>
        <input type="text" name="amount" id="amount" class="form-control">
      </p>
      <p>
        <label for="currency">Currency</label>
        <select name="currency" id="currency" class="form-control">
          <option value="USD">USD</option>
        </select>
      </p>
      <p>
        <button type="button" id="submitBtn" class="btn btn-primary">Submit</button>
      </p>
    </form>

    <!-- Modal -->
    <div class="modal fade" id="converterModal" tabindex="-1" role="dialog" aria-labelledby="converterModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="converterModalLabel">Conversion Result</h4>
          </div>
          <div class="modal-body">
            <div id="converterResult"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#submitBtn").click(function(){
        var amount = $("#amount").val();
        var currency = $("#currency").val();

        $.post("converter.php", { amount: amount, currency: currency }, function(response){
          $("#converterResult").html(response);
          $("#converterModal").modal('show');
        });
      });
    });
  </script>
</body>
</html>

登录后复制

converter.php:

<?php
// converter.php
$amount = $_POST['amount'];
$currency = $_POST['currency'];

// 进行转换计算 (示例)
$btc_value = $amount / 50000; // 假设 1 BTC = 50000 USD

echo "<p>USD: " . htmlspecialchars($amount) . "</p>";
echo "<p>BTC: " . htmlspecialchars($btc_value) . "</p>";
?>

登录后复制