使用 PHP AJAX 显示成功消息而不刷新页面后再次显示表单 div

Question

我是 php 和 ajax 的新手。我想提交一个不刷新页面的表单。我成功地实现了。提交后的表单显示成功消息。但我想要在成功消息之后。结果淡出并再次显示空的表单字段。这样我就可以再次提交另一个表单。

<script src="assets/jquery-1.12.4-jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {  

// submit form using $.ajax() method

$('#reg-form').submit(function(e){

    e.preventDefault(); // Prevent Default Submission

    $.ajax({
        url: 'submit.php',
        type: 'POST',
        data: $(this).serialize() // it will serialize the form data
    })
    .done(function(data){
        $('#form-content').fadeOut('slow', function(){
            $('#form-content').fadeIn('slow').html(data);
            $('#form-content').fadeOut('slow').html(data);
            $('#form-content').fadeIn('slow').html();

        });
    })
    .fail(function(){
        alert('Ajax Submit Failed ...');    
    });
});

});

<div id="form-content">

        <form method="post" id="reg-form" autocomplete="off">

            <div class="form-group">
                <input type="text" class="form-control" name="txt_fname" id="lname" placeholder="First Name" required />
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="txt_lname" id="lname" placeholder="Last Name" required />
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="txt_email" id="lname" placeholder="Your Mail" required />
            </div>

            <div class="form-group">
                <input type="text" class="form-control" name="txt_contact" id="lname" placeholder="Contact No" required />
            </div>

            <hr />

            <div class="form-group">
                <button class="btn btn-primary">Submit</button>
            </div>

        </form>

        </div>

提交.php

if( $_POST ){

$fname = $_POST['txt_fname'];
$lname = $_POST['txt_lname'];
$email = $_POST['txt_email'];
$phno = $_POST['txt_contact'];

?>
<table class="table table-striped" border="0">

<tr>
<td colspan="2">
    <div class="alert alert-info">
        <strong>Success</strong>, Form Submitted Successfully...
    </div>
</td>
</tr>

<tr>
<td>First Name</td>
<td><?php echo $fname ?></td>
</tr>

<tr>
<td>Last Name</td>
<td><?php echo $lname ?></td>
</tr>

<tr>
<td>Your eMail</td>
<td><?php echo $email; ?></td>
</tr>

<tr>
<td>Contact No</td>
<td><?php echo $phno; ?></td>
</tr>

</table>
<?php

} ?>

请帮帮我。您可以在此处查看工作示例 http://demos.codingcage.com/ajax-form-submit/

Answer 1

首先，您需要修改表单中的 ID 属性，因为 ID 必须是唯一的。然后，提交成功后，可以使用success事件jQuery DOC。

所有这一切都假设 PHP 端没问题，正如你提到的那样。

HTML

<div id="response"></div>
<div id="form-content">
    <form method="post" id="reg-form" autocomplete="off">
        <div class="form-group">
            <input type="text" class="form-control" name="txt_fname" id="fname" placeholder="First Name" required />
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="txt_lname" id="lname" placeholder="Last Name" required />
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="txt_email" id="email" placeholder="Your Mail" required />
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="txt_contact" id="num" placeholder="Contact No" required />
        </div>
        <hr />
        <div class="form-group">
            <button class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>

我刚刚添加了一个响应 div，以防您需要让用户知道它是成功的（不是强制性的，但对用户友好）。我还修改了你处理数据的方式（见代码中的 cmets）

jQuery (3.2.1)

<script type="text/javascript">

function clear_form() // only if you want to clear the form after success
 {  // I use the IDs from form, adapt to yours if needed
    $("#fname").val('');
    $("#lname").val('');
    $("#email").val('');
    $("#num").val('');
 }

$(document).ready( function() {

  $('#reg-form').submit(function(e){

  e.preventDefault(); // Prevent Default Submission
  var data = $("#reg-form").serialize(); // it will serialize the form data
    $.ajax({
    url: 'submit.php',
    type: 'POST',
    data: { data }, // added the { } to protect the data

    success : function(data){ // here we use the success event

    $('#response').html(data); // only if you use PHP response and want to show it

    $('#form-content').fadeOut("slow");
    clear_form(); // reset all fields
    $('#form-content').fadeIn("slow");

    },
    error: function (request, status, error) { // handles error
    alert(request.responseText); // change alert to whatever you want/need
    }
   })
    .fail(function(){
    alert('Ajax Submit Failed ...');    
    });
  });

});

</script>