单击一个按钮后，.html文件重定向到.php文件

Question

 <?php session_start(); include_once("config.php"); //current URL of the Page. cart_update.php redirects back to this URL $current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?> <!-- View Cart Box Start --> <?php if(isset($_SESSION["cart_products"]) && count($_SESSION["cart_products"])>0) { echo '<div class="cart-view-table-front" id="view-cart">'; echo '<h3>Your Shopping Cart</h3>'; echo '<form method="post" action="cart_update.php">'; echo '<table width="100%" cellpadding="6" cellspacing="0">'; echo '<tbody>'; $total =0; $b = 0; foreach ($_SESSION["cart_products"] as $cart_itm) { $product_name = $cart_itm["product_name"]; $product_qty = $cart_itm["product_qty"]; $product_price = $cart_itm["product_price"]; $product_code = $cart_itm["product_code"];; $bg_color = ($b++%2==1) ? 'odd' : 'even'; //zebra stripe echo '<tr class="'.$bg_color.'">'; echo '<td>Qty <input type="text" size="2" maxlength="2" name="product_qty['.$product_code.']" value="'.$product_qty.'" /></td>'; echo '<td>'.$product_name.'</td>'; echo '<td><input type="checkbox" name="remove_code[]" value="'.$product_code.'" /><strong>Remove</strong></td>'; echo '</tr>'; $subtotal = ($product_price * $product_qty); $total = ($total + $subtotal); } echo '<td colspan="4">'; echo '<button type="submit">Update</button><a href="view_cart.html" class="button">Checkout</a>'; echo '</td>'; echo '</tbody>'; echo '</table>'; $current_url = urlencode($url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); echo '<input type="hidden" name="return_url" value="'.$current_url.'" />'; echo '</form>'; echo '</div>'; } ?> <!-- View Cart Box End --> <!-- Products List Start --> <?php $results = $mysqli->query("SELECT product_code, product_name, product_desc, product_img, price FROM products ORDER BY id ASC"); if($results){ $products_item = '<ul class="products">'; //fetch results set as object and output HTML while($obj = $results->fetch_object()) { $products_item .= <<<EOT <li class="product"> <form method="post" action="cart_update.php"> <div class="product-content"><h3><strong>{$obj->product_name}</strong></h3> <div class="product_img"><img src="product_images/{$obj->product_img}"class="img-responsive img-thumbnail" width="150px" height="150px"></div> <div class="product-desc">{$obj->product_desc}</div> <div class="product-info"> <div class="product-price"><strong> Price {$currency}{$obj->price} </strong> </div> <fieldset> <label> <span>Quantity</span> <input type="text" size="2" maxlength="2" name="product_qty" value="1" /> </label> </fieldset> <input type="hidden" name="product_code" value="{$obj->product_code}" /> <input type="hidden" name="type" value="add" /> <input type="hidden" name="return_url" value="{$current_url}" /> <div align="center"><button type="submit" class="add_to_cart">Add to cart</button></div> </div></div> </form> </li> EOT; } $products_item .= '</ul>'; echo $products_item; } ?> 

Im developing a ecommerce website. I'm new to AJAX .I don't know how to solve this problem. In index.html i put ajax code to load the index.php inside the html body. And when i click " add to cart " " checkout " " update " button its redirecting to index.php instead staying on index.html .

UPDATED*

<script >
function load_data(){
        $.ajax({
          url: "index.php",
          dataType: 'html',
          cache: false,
          success: function(data){
             $("#mydiv").html(data);
          } 
        });
}
$(document).ready(function(){
load_data();
});
</script>

index.html index.php

Answer 1

The jQuery $.ajax() function is used to perform an asynchronous HTTP request. It was added to the library a long time ago, existing since version 1.0. The $.ajax() function is what every function discussed in the previously mentioned article calls behind the scene using a preset configuration. The signatures of this function are shown below:

$.ajax(url[, options])
$.ajax([options])

The url parameter is a string containing the URL you want to reach with the Ajax call, while options is an object literal containing the configuration for the Ajax request.

In its first form, this function performs an Ajax request using the url parameter and the options specified in options. In the second form, the URL is specified in the options parameter, or can be omitted in which case the request is made to the current page.

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

In Your case your code should be

    $(document).ready(function(){
            auto_load();
        });
    setInterval(auto_load,10000);
function auto_load(){
    $.ajax({
       url: 'path/to/file/index.php',
       data: {
          format: 'json'
       },
       error: function() {
          $('#info').html('<p>An error has occurred</p>');
       },
       dataType: 'jsonp',
       success: function(data) {
       alert(data);
         //auto_load(); your code assignment and result goes here
       },
       type: 'GET'
    });
}

and also refer https://www.sitepoint.com/use-jquerys-ajax-function/