Question

我有一个基本上将表单数据插入数据库的表单。我这是通过AJAX请求来做的。现在，所以当插入数据时，成功信息为＆＃34; rentinsert.php＆＃34;显示在表单页面中，显示＆＃34;您的订单已被放置＆＃34;。我想要做的是将它显示为一个模态。那么如何在模态中显示AJAX的成功消息。以下是我的代码 -

html -

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

rentinsert.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);
    ?>

Answer 1

成功将数据插入数据库时，您需要ObjectAnimator scale = ObjectAnimator.ofPropertyValuesHolder(images_cen[ck], PropertyValuesHolder.ofFloat(View.SCALE_X, 0, 1.6f), PropertyValuesHolder.ofFloat(View.SCALE_Y, 0, 1.6f) ); scale.setInterpolator(new LinearInterpolator()); scale.setStartDelay(ck * 600); scale.setDuration(600); final View view = images_cen[ck]; scale.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { view.setVisibility(View.VISIBLE); mySoundPool.play(2, 1, 1, 1, 0, 1); } @Override public void onAnimationEnd(Animator animation) { } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); scale.start();消息

echo

Answer 2

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

将AJAX Confrimation显示为模态

2 个答案: