Question

我有一个名为 test.php 的页面，其中显示2种产品，第一种是 Odd ，第二种是 Even ，页面具有一个HTML切换/切换

注意（，代码工作正常，并根据切换/切换值显示结果）

我有1期

可以运行代码，但它会重复执行开关/切换（请参见下面的图片）

。

test.php

<?php
require ('../../common.php');
echo "
<html>
<head>
<link rel='stylesheet' href='css/toggleOddEven.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

在页面加载时加载默认的奇数产品

<script type='text/javascript'>
$(window).load(function() {
$.ajax({
    type:'POST',
    url:'test.php',
    data:{
        product_type:'odd'
        },
    success: function(data){
    $('#view').html(data);
    }
});
});
</script>

切换/切换值

<script type='text/javascript'>
$(function(){
$('#myonoffswitch').click(function() {
    if ($('#myonoffswitch').prop('checked')) {

        $.ajax({
            type:'POST',
            url:'test.php',
            data:{
                product_type:'even'
            },
            success: function(data){
                $('#view').html(data);
            }
        });
    }else{

        $.ajax({
            type:'POST',
            url:'test.php',
            data:{
                product_type:'odd'
            },
            success: function(data){
                $('#view').html(data);
            }
        });
    }
});
});
</script>

其他页面代码

</head>
<body>

<div class='onoffswitch'>
<input type='checkbox' name='onoffswitch' class='onoffswitch-checkbox' id='myonoffswitch'>
<label class='onoffswitch-label' for='myonoffswitch'>
    <span class='onoffswitch-inner'></span>
    <span class='onoffswitch-switch'></span>
</label>
</div>

<div id='view'></div>

</body>
</html>
";
if (isset($_POST['product_type'])) {
$product_type = $_POST['product_type'];
$allProducts="SELECT * FROM products_tbl 
            WHERE product_type = :product_type ";
$stmt = $db->prepare($allProducts);
$query_params = array( 
            ':product_type' => $product_type 
        );
$stmt->execute($query_params);

$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($data as $value):
    echo "
        <strong># </strong> <a href='prod?id=".$value['product_name']."'>".$value['product_name']."</a> </br>
    ";
endforeach;

}

?>

为什么要重复标记？看下面的图片

odd product (default value)

even product

Answer 1

这是因为您将整个页面加载到test.php中，而不仅是结果数据。这应该有帮助：

if (isset($_POST['product_type'])) {
  --> keep existing code
} else {
  --> Put your large echo into here
  echo "
<html>
<head>
<link rel='stylesheet' href='css/toggleOddEven.css'>
  ...
  ";
}

更清洁的解决方案可能是将数据和UI拆分为单独的PHP文件，而仅请求数据PHP。

php根据html切换开关显示数据库中的数据

1 个答案: