将 AJAX Confrimation 显示为模态 - Showing AJAX Confrimation into a modal

我有一个表单，基本上是将表单数据插入数据库。我是通过 AJAX 请求执行此操作的。现在，因此，当插入数据时，"rentinsert.php"的成功信息将显示在表单页面中，该页面显示"您的订单已下达"。我想做的是将其展示成模态。那么如何在模态中在 AJAX 上显示成功消息。下面是我的代码 -

该网页 -

<form method="post"  id="rentalform" action="rentinsertdb.php">
     <div class="form-group space" >
        <label for="focusedinput" class="col-sm-2 control-label">Full Name</label>
        <div class="col-sm-8 tabular-border">
           <input type="text" class="form-control" placeholder="Enter full name" name="rentname">
        </div>
     </div>
     <div class="form-group space" >
        <label for="focusedinput" class="col-sm-2 control-label">Choose your ride</label>
        <div class="col-sm-8 tabular-border">
           <div class="dropdown">
              <select class="btn btn-default dropdown-toggle" name="rentcar" >
              <option>Choose your ride</option>
              <option value="Toyota Alion 2008">Toyota Alion 2008</option>
              <option value="Toyota Alion 2008">Toyota Premio 2008</option>
              <option value="Toyota Alion 2008">Toyota Corolla 2006</option>
              <option value="Toyota Alion 2008">Toyota Noah 2010</option>
           </select>
           </div>
        </div>
     </div>
     <!-- <div class="form-group space" >
        <label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
        <div class="col-sm-8 tabular-border">
           <input type="text" class="form-control" id="focusedinput" placeholder="Enter phone number">
        </div>
        <div class="col-sm-2">
           <p class="help-block"></p>
        </div>
     </div> -->
     <div class="form-group space" >
        <label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
        <div class="col-sm-8 tabular-border">
           <input type="text" class="form-control" name="rentphone" placeholder="Enter phone number">
        </div>
        <div class="col-sm-2">
           <p class="help-block"></p>
        </div>
     </div>
     <div class="form-group space">
        <label for="txtarea1" class="col-sm-2 control-label">Pick up address</label>
        <div class="col-sm-8 tabular-border"><textarea  name="rentaddress" cols="50" rows="4" class="form-control" placeholder="Enter Full Address; For example: House#38, Road 7/a, Dhanmondi, Dhaka-1205, Bangladesh"></textarea></div>
     </div>
     <div class="col-sm-8 col-sm-offset-2 space">
        <button class="btn-primary btn" style="background-color:#03a9f4; border-color:#03a9f4;" id="submitrent"> Confirm </button>
     </div>
     </form>
  </div>
  <span id="result"></span>
  <script type="text/javascript">
     $("#submitrent").click( function() {
     $.post( $("#rentalform").attr("action"),
     $("#rentalform :input").serializeArray(),
     function(info){ $("#result").html(info);
     });
     // clearInput();
     });
     $("#rentalform").submit( function() {
        return false;
     });
// function clearInput() {
//     $("#myForm :input").each( function() {
//        $(this).val('');
//     });
// }
  </script>

租金插入.php -

<?php
header("Access-Control-Allow-Origin: *");
include_once "rentconnection.php";
// echo "<pre>";
// print_r($_POST);
$sql = "INSERT INTO `rental`
(`name`,`car`,`phone`,`address`)
VALUES ('".$_POST['rentname']."','".$_POST['rentphone']."','".$_POST['rentcar']."','".$_POST['rentaddress']."');";
if(mysqli_query($con, $sql)){
?> 
<body style= "background-color:#1D726A">
<h1>Your Order Has Been Placed! </h1>
</body>
<?php
    } else {
        echo "Error: " . $sql . "<br>" . mysqli_error($con);
    }
    mysqli_close($con);
    ?>

成功

将数据插入数据库时需要echo消息

if (mysqli_query($con, $sql)) {
    echo "<body style= 'background-color:#1D726A'><h1>Your Order Has Been Placed! </h1></body>";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);

if (mysqli_query($con, $sql)) {
    echo json_encode(array('message' => 'Your Order Has Been Placed!'));
    exit();
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);

添加模态

<div class="modal fade" id="modal-content">
  <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p id="msg">Message here!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

在视图中显示消息

("#submitrent").click( function() {
        $.post( $("#rentalform").attr("action"),
        $("#rentalform :input").serializeArray(),
        function(info){
           var obj = jQuery.parseJSON(info);
           $("#msg").html(obj.message);
           $("#modal-content").modal('show');
        });
    // clearInput();
    });