javascript - jquery表单提交后如何刷新特定div

Question

//我的表单提交jquery

$(document).ready(function() {
var form = $('#form1'); // contact form
var submit = $('#submit1'); // submit button
var alert = $('.alert1'); // alert div for show alert message

// form submit event
form.on('submit', function(e) {
    e.preventDefault(); // prevent default form submit
    // sending ajax request through jQuery
    $.ajax({
        url: 'giftcard_check.php', // form action url
        type: 'POST', // form submit method get/post
        dataType: 'html', // request type html/json/xml
        data: form.serialize(), // serialize form data 
        beforeSend: function() {
            alert.fadeOut();
            submit.html('Checking....'); // change submit button text
        },
        success: function(data) {
            alert.html(data).fadeIn(); // fade in response data
            form.trigger('reset'); // reset form
            submit.html('Apply'); // reset submit button text
        },
        error: function(e) {
            console.log(e)
        }
    });
});
});

//我的表单

<p>
   <form action="" method="post" id="form1">
      <input type="text" name="valuebox" placeholder="type your code" required /> 
      <button name="submit" class="button1" type="submit" id="submit1">Apply</button>
   </form>
</p>
<div class="alert1">Hello</div>

//giftcard_check.php

include("include/dbconnection.php");

dbconnect();

session_start();

$_SESSION['fromttl']    =   0;

$valuebox   =   $_POST['valuebox'];

$query      =   "SELECT * FROM db_coupon WHERE code='$valuebox' AND publish='1'";
$result     =   mysql_query($query);
$length     =   mysql_num_rows($result);
$rows       =   mysql_fetch_array($result);
$discount   =   $rows['discount'];

if($length == 1)
{
    $_SESSION['fromttl']    =   $discount;
    echo $_SESSION['fromttl'];
}
else
{
    $_SESSION['fromttl']    =   0;
    echo "Invalid Gift Card!";
}

我的问题是如何刷新特定的div(即，

 <div id="show"><?php echo $_SESSION['fromttl']; ?></div>

)表单提交后立即。

我当前的结果在表单提交后没有刷新特定的 div。我不想刷新整个页面，只想刷新一个特定的 div。如果我刷新整个页面，div 将被刷新。

有什么解决办法吗？我被困在这里了。

Answer 1

您应该尝试一下，在 form.on('submit',... 的末尾添加 return false; 它不会提交您的表单请求您将停留在同一页面上:

//我的表单提交jquery

$(document).ready(function() {
var form = $('#form1'); // contact form
var submit = $('#submit1'); // submit button
var alert = $('.alert1'); // alert div for show alert message

// form submit event
form.on('submit', function(e) {
    e.preventDefault(); // prevent default form submit
    // sending ajax request through jQuery
    $.ajax({
        url: 'giftcard_check.php', // form action url
        type: 'POST', // form submit method get/post
        dataType: 'html', // request type html/json/xml
        data: form.serialize(), // serialize form data 
        beforeSend: function() {
            alert.fadeOut();
            submit.html('Checking....'); // change submit button text
        },
        success: function(data) {
            alert.html(data).fadeIn(); // fade in response data
            form.trigger('reset'); // reset form
            submit.html('Apply'); // reset submit button text
            if(data != 'Invalid Gift Card!') {
              $('div.show').html(data);
            }
        },
        error: function(e) {
            console.log(e)
        }
    });
   return false;  //Will not active the form submission
});

});

//我的表单

<p>
   <form action="" method="post" id="form1">
      <input type="text" name="valuebox" placeholder="type your code" required /> 
      <button name="submit" class="button1" type="submit" id="submit1">Apply</button>
   </form>
</p>
<div class="show"></div>
<div class="alert1">Hello</div>