jQuery AJAX POST结果在另一个页面上

时间:2015-08-21 10:23:03

标签: javascript php jquery mysql ajax

我无法弄清楚AJAX。

如何在index.php上显示检查结果,点击链接(AJAX-javascript函数)以在results.php页面上显示这些结果?

database.sql

  CREATE TABLE IF NOT EXISTS `compare` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `company` varchar(20) NOT NULL,
  `image` varchar(20) NOT NULL,
  `size` varchar(20) NOT NULL,
  `price` int(11) NOT NULL,
  `color` varchar(20) NOT NULL,
  `shape` varchar(100) NOT NULL,
  `weight` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
  ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

INSERT INTO `compare` (`id`, `company`, `image`, `size`, `price`, `color`, `shape`, `weight`) VALUES
(1, 'Adidas', '1.jpg', '7', 600, 'Blue', 'Normal', '50 gram'),
(2, 'Adidas', '2.jpg', '7', 700, 'Red Blue', 'Sports', '60 gram'),
(3, 'Nike', '3.jpg', '8', 800, 'Red Blue', 'Sports', '60 gram'),
(4, 'Puma', '4.jpg', '8', 1800, 'Red Black', 'Normal Sports', '70 gram'),
(5, 'Reebok', '5.jpg', '9', 2000, 'White Black', 'Normal Sports', 'N/A');

database.php中

<?php
$connect = mysql_connect('localhost','root','pass'); 
if (!$connect) { 
die('Could not connect to MySQL: ' . mysql_error());
 }
 mysql_select_db('compare_test',$connect);
?>

的index.php

<script type="text/javascript">
function compare()
{
var total_check = new Array();
$('.products:checked').each(function () {
    total_check.push($(this).val());
});

if (total_check != '') {
    if (total_check.length == '2') {
    var i = 0;
    var pidArray = new Object();
    $('.products:checked').each(function () {
    total_check.push($(this).val());
    var id = $(this).attr('id');
    pidArray[i] = {
        pid: id
    };
    i++;
});
var data = JSON.stringify(pidArray);
var href = this.href;
//e.preventDefault();
$('#wait').show();
        $.ajax({
            url: "compare.php",
            type: "POST",
            data: {pids:data,type:'compare'},
            cache: false,
            success: function (data) {
            $('#wait').hide();
                document.location = "http://localhost/usp/results.php";
            }
        });
    } else {
        alert("Please select two products ");
        return false;
    }
} else {
    alert("Please select minimum two products");
    return false;
}
}
 </script>

<tr>
    <td width="10%"><a href="javascript:void(0)" onclick="compare();" style="color:green;font-size:15px;"><b>Compare</b></a></td>
    <td width="20%">Product Image</td>
    <td width="20%">Comany Name</td>
    <td width="20%">Price</td>
    <td width="20%">Details</td>
</tr>
<?php $sql =mysql_query("Select * FROM compare");
    while($data = mysql_fetch_assoc($sql)) {?>
<tr>
    <td><input type="checkbox" name="products[]" class="products" id="<?php echo $data['id']; ?>"></td>
    <td><img src="image/<?php echo $data['image']; ?>" width="80" height="80px;"></td>
    <td><?php echo $data['company']; ?></td>
    <td><?php echo $data['price']; ?></td>
    <td><a href="javascript:void(0);" class="detail" id="detail-<?php echo $data['id']; ?>">Details</a></td>
</tr>
<?php } ?>

compare.php

<?php
    include('database.php');
    $Totalpids = (array)json_decode(stripslashes($_GET['pids']));
    foreach($Totalpids as $product)
    {
       $sql = mysql_query("SELECT * FROM compare where id=".$product->pid."");
       $data = mysql_fetch_assoc($sql);
       $res .="<table cellspacing='2' cellpadding='0' align='left' width='240'>
       <tr><th align='left'><strong>Product Details</strong></th></tr>
       <tr height='75' align='center'><td align='left'><img src='image/".$data['image']."' width='75px' height='75px'></td></tr>
       <tr height='40' align='center'><td align='left'>".$data['company']."</td></tr>
       <tr height='40' align='center'><td align='left'>".$data['size']."</td></tr>
       <tr height='40' align='center'><td align='left'>".$data['price']."</td></tr>
       <tr height='40' align='center'><td align='left'>".$data['color']."</td></tr>
       <tr height='40' align='center'><td align='left'>".$data['shape']."</td></tr>
       <tr height='40' align='center'><td align='left'>".$data['weight']."</td></tr>";
       $res .= "</table>";
       }
       echo $res;
       ?>

results.php

<?php
  // what here to display taht results?

?>
<!DOCTYPE html>
<html dir="ltr" lang="hr">
<head>
<title>asd</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="application/javascript">
(function($){
$.ajax({
    type: "GET",
    url: "compare.php",
    dataType: "json",
    success: function (data) {
        $.totalProducts = data || 0;
    }
    });
}(jQuery));
</script>
</head>

<body>
</body>
</html>

提供任何建议和提示!

0 个答案:

没有答案