如何使用Ajax和jQuery加载html

时间:2011-07-03 16:20:12

标签: jquery jquery-mobile

我正在使用jquerymobile。我有一个页面,点击刷新按钮即可获得最新帖子。

我无法从viewposts.php获取任何html以显示在#test div中。

$("#refresh").click(function(){        
            $.ajax({  

               cache: false,
               url: "mobile/viewposts.php", 
               success: function (html) {
                    $("#test").append(html);
                    $("#test").fadeOut(1000);
                    alert(html);
                }


            }); 

我尝试过使用dataType:'html',然后输入:'POST'和GET 试过$(“#test”)。html(html);

淡出效果很好。警报为空白。

视图帖子页面获取数据库中的最新帖子。我也在viewposts.php中回应一些随机的html。

如果我不使用jquery,我可以进行ajax调用并获取html。问题是返回的html方式不使用jquerymobile样式表,所以它看起来像纯文本。

我是新手。

请帮忙。

<div data-role="page" id="readBlogPage">
    <div data-role="header">
        <h1>Read Blog</h1>
    </div>
    <div data-role="content">
        <!--<button onclick="ajaxFunction()" data-theme="b" data-role="button" data-iconpos="left" data-icon="refresh" >Refresh</button>-->

        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><a href="#createNewPostPage" id="cancel" data-role="button" data-rel="dialog">New Post</a></div>
            <div class="ui-block-b"><button id="refresh" data-theme="b" data-role="button" data-iconpos="left" data-icon="refresh" type="submit">Refresh</button></div>
        </fieldset>

        <!--<button onclick="ajaxFunction()" data-theme="b" data-role="button" data-iconpos="left" data-icon="refresh" id="refresh" type="button">refresh</button>-->
        <ul data-role="listview" data-theme="d" data-inset="true" id="ajaxout">



        </ul>
        <div id="test" >asdfsadfsd</div>

    </div>
</div>

Viewposts.php回应了很多像这样的行

echo "<li><h3 style=\"margin:0px;\">" . $ row['post_title'] . "</h2>" . $row['post_content'] . "<p class='ui-li-aside'>Lat: ". $row['lat'] ."&nbsp;&nbsp;Lon: ". $row['lon'] ."&nbsp;&nbsp;" .$row['post_date'] . "<strong></p></li>";

这是firebug中的响应标题

Response Headers
Date    Sun, 03 Jul 2011 17:38:20 GMT
Server  Apache/2.2.3 (Red Hat)
X-Powered-By    PHP/5.1.6
Cache-Control   max-age=0
Expires Sun, 03 Jul 2011 17:38:20 GMT
Content-Length  0
Connection  close
Content-Type    text/html; charset=UTF-8
X-Pad   avoid browser bug

2 个答案:

答案 0 :(得分:0)

基本上我可以看到(如果我错了请纠正我)你试图把你从viewposts.php文件中获得的HTML放入$(“#test”),

你试图这样做:

functionn(html){

 $("#test").append(html);
}

Jquery Ajax返回:data,所以请尝试:

function(data){
$("#test".append(data);
}

Jquery Ajax documentation:

答案 1 :(得分:0)

看起来你的Content-Length为0.这是正常的吗?