Submit form without redirect to action page, but refresh current page

问题

I have a form that post to basket.php page, upon form submission it redirects to basket.php page and back to order page(page where form is located). it happens fast but you can still see the basket page for a just second, how do i stop the form from showing the basket.php page at all but still refresh the current page(order page).

My code:

<?php
echo '<div class="food">'; 
echo '<form method="post" action="basket.php"    
    onsubmit="window.location.reload()" >';
echo '<h4>'.$obj->food_title.'</h4>';
echo '<div class="pic"><img src="admin/food_images/'.$obj->food_image.'" 
    width= "180" height= "160"></div>';
echo "<p><b>£".$obj->food_price."</b></p>";
echo '<div class = "btn"><a href="info.php?foo_id='.$obj->food_id.'" 
    style="float:left">INFO</a></div>';
echo '<div class = "add_b"><button>Add to Basket</button></div>';
echo '<input type="hidden" name="food_code" 
    value="'.$obj->food_id.'"  />';
echo '<input type="hidden" name="type" value="add" />';
echo '</form>';
echo '</div>';
?>

回答1:

Hi here is a simple ajax form submit file try this,

index.html:

<!DOCTYPE html>
<html>
<title>AJAX Tutorial</title>
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>
<body>
<div class="container">
  <form id="add-basket-form" class="form-inline">
    <div class="form-group">
      <label class="sr-only" for="exampleInputAmount">Name</label>
      <div class="input-group">
        <input type="text" class="form-control" id="name" name="name" placeholder="name">
      </div>
    </div>
    <div class="form-group">
      <label class="sr-only" for="exampleInputAmount">Age</label>
      <div class="input-group">
        <input type="text" class="form-control" id="age" name="age" placeholder="age">
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <input type="submit" class="form-control" name="add" value="Add" placeholder="age">
      </div>
    </div>
  </form>
</div>

<script>
jQuery(function(){
    $('#add-basket-form').submit(function(){
        var name = $('#name').val();
        var age = $('#age').val();

        $.ajax({
            url : 'basket.php',
            dataType : 'JSON',
            type : 'post',
            data: {
                'name' : name,
                'age' : age,
            },
            success: function(data) {
                console.log(data);
            }
        });
        return false;
    });
});
</script>
</body>
</html>

<?php
    $name = $_POST['name'];
    $age = $_POST['age'];
    // Above is the way to get variables and you can process whatever you want

    echo 'success';
?>

回答2:

Cut the code from basket.php and paste it at the top of your main page, preceded by

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  //basket.php code here 
}

Afterwards, change the form code to

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">

This will refresh the page and execute the php code at the top of the page.

回答3:

Perhaps this will help. Contains various answers, some involve using an absolute url Refresh page after form submiting

To stop the action from briefly showing the basket page, I'm not sure you can prevent the visit to that page. Does basket.php print anything to the screen? I would think it's just there to process the incoming POST vars, and then move on to your orders page, right?

来源：https://stackoverflow.com/questions/29010176/submit-form-without-redirect-to-action-page-but-refresh-current-page

标签

php

html

forms