Question

我在做一个价格范围滑块。在那里，我将根据该价格范围获取数据。现在我的代码是这样的

数据库就像这样

-- 
-- Table structure for table `products`
-- 

CREATE TABLE `products` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `product` text NOT NULL,
  `price` float(5,2) NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `status` int(1) NOT NULL DEFAULT '1',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

-- 
-- Dumping data for table `products`
-- 

INSERT INTO `products` VALUES (1, 'Product # 1', 70.54, '2014-01-06 03:20:23', 1);
INSERT INTO `products` VALUES (2, 'Product # 2', 300.00, '2014-01-06 03:20:23', 1);
INSERT INTO `products` VALUES (3, 'Product # 3', 805.88, '2014-01-06 03:20:42', 1);

db.php代码就像这样

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root');
define('DB_DATABASE', 'product');
$connection = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

并且html和php代码就像这样

<?php
include('db.php');
if($_POST)
{
    mysqli_real_escape_string($connection,$_POST['amount']);
    $values = str_replace(' ','',$_POST['amount']);
    $values = str_replace('$','',$values);
    $values = explode('-',$values);
    $min = $values[0];
    $max = $values[1];
    $res = mysqli_query($connection,'select `id`,`product`,`price`, DATE_FORMAT(`date`,"%D %b-%Y") as `date` from products where `price` BETWEEN "'.$min.'" AND "'.$max.'"');
    $count  =   mysqli_num_rows($res);
    $HTML='';
    if($count > 0)
    {
        while($row=mysqli_fetch_array($res))
        {
            $id         = $row['id'];
            $product    = $row['product'];
            $price      = $row['price'];
            $date       = $row['date'];

            $HTML .= '<div>';
            $HTML .= 'Product ID: '.$id;
            $HTML .= '<br />Product Name: '.$product;
            $HTML .= '<br />Price: <strong>$'.$price.'</strong> Posted on: '.$date;
            $HTML .= '</div><br /><hr />';
        }
    }
    else
    {
        $HTML='No Data Found';
    }
}
else
{
    $min = 30;
    $max = 700;
    $HTML='Search Products in range.';
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>How to create Price Range Slider in jQuery & PHP with MySQL | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      img {border-width: 0}
      * {font-family:'Lucida Grande', sans-serif;}
    </style>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  </head>

<script type="text/javascript">
$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 1000,
      values: [ <?php echo $min; ?>, <?php echo $max; ?> ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });
</script>
<body>
    <div>


<form action="" method="post" id="products">
<div style="margin-left:20px">
    <label for="amount">Price range:</label>
    <input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" readonly>
    <br><br>
    <div id="slider-range" style="width:80%;"></div>
    <br><br>
    <input type="submit" value=" Show products " />
    <br><br>
    <?php echo $HTML; ?>
</div>
</form>

</body>
</html>

现在这个很好。但在这里我想添加ajax意味着将有两个文件。一个是简单的html表单就像这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>How to create Price Range Slider in jQuery & PHP with MySQL | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      img {border-width: 0}
      * {font-family:'Lucida Grande', sans-serif;}
    </style>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <script src="js/jquery-ui.js"></script>
  </head>
<body>
    <div>

<form action="" method="post" id="products">
<div style="margin-left:20px">
    <label for="amount">Price range:</label>
    <input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" readonly>
    <br><br>
    <div id="slider-range" style="width:80%;"></div>
    <br><br>
    <input id="search" type="submit" value=" Show products " onClick="priceRange()" name="search" />
    <br><br>
</div>
</form>

</body>
</html>

在jquery-ui.js我将拥有ajax。因此，当调整价格并点击显示产品按钮时，它将开始显示该范围内的产品。我已经在一个页面（顶部示例）中完成了该部分，现在我想通过获取ajax代码在两到三个文件中执行此操作。那么有人可以告诉我该怎么做吗？因为我是ajax的新手我很困惑。我想在ajax上发帖..

使用ajax post方法从价格范围滑块获取产品？

0 个答案: