使用ajax调用来清空div

时间:2017-05-21 13:52:31

标签: javascript php jquery html ajax

制作一个ajax,所以当我点击这个Link1按钮时,我需要清空products_list div中的内容

<button type="w3-button">Link1</button>

点击link1按钮清空product_list

中的产品时,请帮助我了解如何拨打ajax电话

以下代码包含一个javascript来清除products_list的内容,但它不起作用

PHP文件

 <?php
session_start(); //start session
include("config.inc.php"); //include config file
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stores</title>
<link href="style/style1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div align="center">
<h3>Products</h3>
</div>

<script>
$(document).on("click", ".w3-button", function() {
  $('.products-wrp').html('')
 // $("#products_list").html();
});</script>
<?php
//List products from database
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code, product_image, product_price FROM products_list");
//Display fetched records as you please

$products_list =  '<ul id ="products_list" class="products-wrp">';

while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
<div>Price : {$currency} {$row["product_price"]}<div>
</form>
</li>
EOT;

}
$products_list .= '</ul></div>';
echo $products_list;
?>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

检查以下代码将清空Ajax请求中的div失败 -

sub <- i[,c(1, 2)]
tmp <- distm(sub, fun = distVincentyEllipsoid)
diag(tmp) = NA
i$mean_dist <- mean(tmp[!is.na(tmp)])
function getFailOutput() {
    $.ajax({
        url:'myAjax.php',
        success: function (response) {
            console.log(data, response);
            $('#output').html(response);
        },
        error: function () {
            //Empty Output  Div ON Error Returned From Ajax Request
            $('#output').html('');
        },
    });
    return false;
}