在jQuery中返回php回声

时间:2015-11-17 15:44:00

标签: php jquery ajax

<li>
  <a id="collection" href="collections.php">
     <span class="glyphicon glyphicon-th white"> Collections</span>
  </a>
</li>

  <script>
     $(document).ready(function(){
        $("#collection").click(function(){
            $.ajax({
                type: 'POST',
                url: 'pagination.php',
                success: function(data) {
                  $('#cont').show();
                }
            });
        });
     });
    </script>

pagination.php:

<?php
require_once "database.php";
$db = new Database();

$perPage = 9;
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$startAt = $perPage * ($page - 1);

$queryTotalRow = "SELECT COUNT(*)  FROM image";
$rsetTotalRow = $db->query($queryTotalRow);
$fetchTotalRow = mysqli_fetch_array($rsetTotalRow);

$totalPages = ceil($fetchTotalRow["0"] / $perPage);

$links = "";
    for ($i = 1; $i <= $totalPages; $i++) {
     $links .= ($i != $page ) ? "<li><a href='collections.php?page=$i'>Page $i</span></a></li> " 
                              : "<li><a href='collections.php?page=$i'>Page $page</a></li> ";
    }

$paginationQuery = "select name,image,price,description from image LIMIT $startAt, $perPage";
$result = $db->query($paginationQuery);
        if($result){
                echo '<div class="containerCollection" id="cont" style="display:none" >';
            while($row = mysqli_fetch_array ($result)){ 
                echo '<div style="float:left" class="divEntry">';
                echo "<div align='center' class='nameEntry'>".$row['name']."</div>";
                echo '<div align="center"><img src="'.$row['image'].'" class="imageEntry"/></div>'; 
                echo "<div align='center' class='priceEntry'>".$row['price']."</div>";
                echo "<div class='descEntry'>".$row['description']."</div>";
                echo '</div>';
            }
                echo "<div class='text-center' style='clear:both'>";
                echo "<ul class='pagination'>";
                echo $links;
                echo '</ul>';
                echo '</div>';
                echo '</div>';
        }


?>

为什么这不起作用?我从收集按钮单击触发ajax调用,然后我想返回包裹在div中的一些回声,我设置隐藏,然后我想显示它。

编辑:完全更新我的pagination.php似乎有问题。

edit2:解决方案使用此解决方案jQuery showing div and then Disappearing

2 个答案:

答案 0 :(得分:3)

您的回复还没有在页面上显示。您刚刚在Ajax调用中回应了它。 在您的成功函数中,将返回的数据放在页面上,然后尝试显示它,即

success: function(data) {
           $('body').append(data);
           $('body #cont').show();
        }

这是假设数据正确返回,我在我们的pagination.php中添加一些内容return json_encode($row),然后您在成功函数中以JSON格式获取数据以构建元素想。

答案 1 :(得分:1)

运行代码时检查浏览器中的有效负载和响应,确保它返回数据。然后,您可以指定要在ajax中返回的显式html类型,最后附加html,如下所示:

应用html:

<!--html-->
<html>  
<head>
        <script language="javascript" type="text/javascript" src="jquery-1.11.3.js"></script>
        <script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1>Test header</h1>
    <h2 id="idTxt"></h2>
</body>
</html>

应用javascript:

//javascript
$(document).ready(function() {
    var data = 'name=getData'; //data parameter passed through to execute specific functions 
    $.ajax({
        type: "POST",
        url: "function.php",
        data: data,
        dataType: 'json',
        success: function(data) {
          $("#idTxt").append(data["html"]);
          console.log(data["html"]);
        },
        error: function(data) {
            //console.log(data);
        }
    });
});

应用php:

//php 
<?php 
    if (isset($_POST["name"]))
    {
        $string = "<h4> Hi there </h4>"; //build up html as string
        $obj = new stdClass();

        $obj->html = $string;   

        echo json_encode($obj);     

    }
?>

也尝试用get取代你的POST,记住你正试图从服务器获取html响应数据。祝你好运,希望有所帮助。 :)