Question

我有以下代码正常工作，但是当我点击每个帖子时，想要使用外部.html或默认html div页面显示的帖子内容，以便内容不显示整个网站内容：

HTML代码：

<head>
    <meta charset="utf-8">
    <title>Hope</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <script src="css/style.css"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="js/script.js"></script>

</head>
<body>

    <div id="devotionpage" data-role="page">
    <div data-role="header" class="sys_hd" data-position="fixed" data-id="sys_header" data-theme="c" >
        <h1>Daily Devotional Messages</h1>
        </div><!-- header -->

        <div data-theme="c" data-role="content" id="devotionlist"> </div><!-- content -->

        <div data-role="footer" data-position="fixed" data-id="sys_footer" data-theme="c">
                    <div data-role="navbar" >
                <ul>
                    <li><a href="#devotionpage" class="sys_ft">Home</a></li>
                    <li><a href="#devotionpage" class="sys_ft">Disclaimer</a></li>
                </ul>
            </div><!-- navbar --> 
        </div><!-- footer --> 
    </div><!-- page -->


    <div id="articlepost" data-role="page" data-transition="fade">
    <div data-role="header" class="devotion_hd" data-position="fixed" data-theme="c" >

        <div data-theme="c" data-role="content" id="articlecontent"> </div><!-- content -->

        <div data-role="footer" data-position="fixed" data-id="sys_footer" >
                    <div data-role="navbar" >
                <ul>
                    <li><a href="#devotionpage" class="sys_ft">Home</a></li>
                    <li><a href="#devotionpage" class="sys_ft">Disclaimer</a></li>
                </ul>
            </div><!-- navbar --> 
        </div><!-- footer --> 
    </div><!-- page -->

</body>
</html>

JS代码：

$(document).on("pagebeforeshow", "#devotionpage", function() {
    $(this).find(".ui-listview-filter input").val("").trigger("change");
    });

$( document).ready(function (){
    var url = 'http://howtodeployit.com/category/daily-devotion/feed/?json=recentstories&callback=listPosts' ;
    $.ajax({
        type: "GET",
        url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=1000&callback=?&q=' + encodeURIComponent(url),
        dataType: 'json',
        error: function(){
            alert( 'Unable to load feed, Incorrect path or invalid feed' );
        },
        success: function(data ){
            var postlist = data.responseData.feed.entries;
            var html = '<ul data-role="listview" data-filter="true">' ;
            for (var i = 0 ; i < 6 ; i++) {
                var entry = postlist[i];
                html += '<li>';
                html += '<a href="' + entry.link + '">';
                html += '<div class="etitle">' + entry.title + '</div>' ;
                html += '<div class="eauthor">' + entry.author + '</div>' ;
                html += '<div class="epubdate">' + entry.publishedDate + '</div>';
                html += '<div class="esnippet">' + entry.contentSnippet + '</div>';
                html += '</a>';
                html += '</li>';
            }
            html += '</ul>';
           $( "#devotionlist" ).append(html);
           $( "#devotionlist ul[data-role=listview]" ).listview();

        }});
    });

由于

Answer 1

我看到代码存在一个问题。函数showarticle有这一行

(html+='</ul>';) outside the ajax call's callback handler, but the variable html is declared inside it. So, actually the line 

html+='</ul>' is translated to undefined += '</ul>', which is not correct, unless you have var html; declared globally outside.

Answer 2

“使用外部.html显示的帖子内容”

您可以使用内容类型为text / html对外部html进行ajax调用，并将响应加载到div中。

Answer 3

我担心我不应该发布完整可行的代码，因为SO是帮助人们实现他们的解决方案，并指出他们正确的方向。所以，我只会发布一个代码段。

$.ajax({
  url: your_server_side_script.extension, //example: handleInput.php
  dataType: 'text/html',
  data: {postid: $('#postid').val()},
  success: function(responseHTML) {
     $('#postContentDiv').html(responseHTML);
  }
});

your_server_side_script.extension（handleInput.php）应生成html标签并打印出来，以便在ajax成功时在responseHTML变量中可用。

Answer 4

我创建了一个函数来处理不同页面上每个帖子的显示：

function showPost(id) {
$('#devotionlist').html("Please wait...");
$.getJSON('http://howtodeployit.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
    var output='';
    html += '<h3>' + data.post.title + '</h3>';
    html += data.post.content;
    $('#devotionlist').html(html);
}); //get JSON Data for Stories
} //showPost

这个位调用onClick函数：

html += '<a href="#articlecontent" onclick="showPost(' + val.id + ')">';

将每个单击的帖子加载到页面中

4 个答案: