Jquery Ajax传递值但不显示在div中

时间:2013-05-02 06:24:05

标签: php jquery ajax

我试图解决过去两天的这个问题,但是:(

现在我有一个index.php页面,其中显示了数据库添加的所有数据。 这是我的索引页

<html>
 <head>
  <script>
   $(document).ready(function(){
     var overlayclass = $("<div id='overlayclass'></div>");
     //pagination starts
     $("#pagination li:first")
     .css({'color' : '#FF0084'}).css({'border' : 'solid #dddddd 10px'});
     $("#page").load("Controller/pagination_data_all_adds.php?page=1");
    //Pagination Click
    $("#pagination li").click(function(){
 //CSS Styles
    $("#pagination li")
    .css({'color' : '#FF0084'})
    .css({'border' : 'none'});
    $(this)
    .css({'border' : 'solid #dddddd 10px'})
    .css({'color' : '#0063DC'});
//Loading Data
   var pageNum = this.id;
     $("#page").load("Controller/pagination_data_all_adds.php?page=" + pageNum);
     });
//pagination ends                 
//for closing the div
   $(".close").click(function () {
    $(".divpopup").hide();
    overlayclass.appendTo(document.body).remove();
    return false;
   });
//for close image
   $(".x").click(function () {
   $(".divpopup").hide();
   overlayclass.appendTo(document.body).remove();
   return false;
 });
//onclick on button display div and overlay with button value and post the value to the index   page where I can use it to select the specific adds data from database
$(':submit').live('click',function () {
var id = $(this).val();
overlayclass.show();
overlayclass.appendTo(document.body);
$(".divpopup").show('slow');
$.ajax({
url: 'index.php',
data:'button=' + $(this).val(),
dataType: 'json',
succss: function(data)
{
$('.divpopup').html('');
alert(data);
$('.divpopup').append('button:'+data);
}
});
return false;
});
});

</script>
</head>

<body>
<div class="divpopup">
<div class="divcontent">
<img src="http://www.catalyst-gc.com/images/icon_close_window.jpg" alt="icon_close_window" 
class="x" id="imgclose" />

<div class="detail_data">

<?php

print "<h1>".$button."</h1>";

?>

</div>

<a href="" class="close">Close</a>

</div>

</div>


<div id="page"></div>

<ul id="pagination">

<?php

//Pagination Numbers

for($i=1; $i<=$pages; $i++)

{

echo '<li id="'.$i.'"-->'.$i.'';
}

?>

</ul>

<!--Pagging display ends -->

</body>

</html>

这是我的pagination_data_all_adds页面,它将通过索引页面中的jQquery加载函数加载。内页div。然后点击表格内的按钮显示id为add的popupdiv,然后用它来显示其余的数据。

<?php include_once('dbconn.php');
$per_page = 6;
if($_GET)  
{  
$page=$_GET['page'];  
}  

$start = ($page-1)*$per_page;  
$sql = "select * from adds order by add_id limit $start,$per_page";  
$result = mysql_query($sql);  
echo "<table cellspacing='0'>";
echo "<thead>";
echo "<th></th>";
echo "<th>Advertise</th>";
echo "<th>Title</th>";
//echo "<th>Description</th>";
echo "<th>Price</th>";
echo "</thead>";
while ($adds = mysql_fetch_array($result)) {
echo "<tbody>";
echo "<tr class='even'>";
$image_link = $adds["image"];
echo "<td><img class='image' src=adds_images/".$image_link."></td>";
echo "<td><b>".$adds["add_type"] . "</b></td>";
echo "<td><b>".$adds["add_title"] ."</b></td>";
echo "<td><b>".$adds["add_price"] ."</b></td>";
echo "<td>";
echo "<form method='post' action=''>"
echo "<button class='button' value='".$adds['add_id']."' type='submit'>Detail!</button>";
echo "</form>";
echo"</td>";
echo "</tr>";
echo "</tbody>";
}
 echo "</table>";?> 

现在的问题是,当我点击页面div的按钮时,它什么也没显示,但是当我看到Firebug响应时,它显示在那里。单击按钮时不会显示。

2 个答案:

答案 0 :(得分:0)

ajax调用中的dataType为json

$.ajax({
url: 'index.php',
data:'button=' + $(this).val(),
dataType: 'json', <--------------------------------- JSON

但是你要回归html

echo "<table cellspacing='0'>";
echo "<thead>";
echo "<th></th>";
echo "<th>Advertise</th>";
..........................
..........................

因此,您的电话实际上是失败(如果您使用了fail,您可能会发现这一点。)

所以答案是返回json或更改数据类型。


N.B。

很多已弃用的功能。使用.on代替live。使用.done代替success。使用mysqli/pdo代替mysql

    if($_GET)  
{  
$page=$_GET['page'];  
}  

你需要在approriate index上使用issetempty。始终设置$_GET。因此检查它的存在是徒劳的。你需要检查索引。即。

if(isset($_GET['page']))

答案 1 :(得分:0)

再次回应@itachi所说的内容,从你的php传递json数据。您的js脚本正在等待json对象,但您传递的是html文件。 以你的JavaScript // dataType:'json',注释掉这一行的方式来使用你的代码。 我还鼓励你使用jquery dataTables来节省时间。看看它here