我有一个名为test.php的页面，它显示两种类型的产品，第一种类型是奇数第二种类型是偶数，该页面有一个html开关/切换
注（代码正常工作，根据开关/切换值显示结果）
我有一个问题
代码运行没问题，但它复制了开关/切换（见下图）
.
测试.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;
}
?>为什么要复制标签？见下图
奇数乘积（默认值）
均匀产品
1条答案
按热度按时间n1bvdmb61#
这是因为您在test.php中加载了整个页面，而不仅仅是结果数据。这将有助于：
一个更干净的解决方案可能是将数据和ui分割成单独的php文件，并且只请求php数据。