使用json API和AJAX解析WordPress博客数据

时间:2013-09-25 作者:Isaac Bassey

对于如何使用json api插件从wordpress博客帖子中提取数据,我看到了很多回应。许多人使用美元。getJSON,$。AJAX响应数据。喂养条目、成功函数()等。

从wordpress解析JSON API数据的正确方法是什么,将结果发布到jQuery mobile listview中的content div页面。

我有以下代码,但无法获得预期结果:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <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="blog" data-role="page">
    <div data-role="header" class="sys_hd" data-position="fixed" data-id="sys_header" >
        <h1>Sysads Posts</h1>
        </div><!-- header -->
        <div data-theme="c" data-role="content" id="postlist"> </div><!-- content -->
        <div data-role="footer" data-position="fixed" data-id="sys_footer" >
                    <div data-role="navbar" >
                <ul>
                    <li><a href="#blog" class="sys_ft">Home</a></li>
                    <li><a href="#blog" class="sys_ft">Disclaimer</a></li>
                </ul>
            </div><!-- navbar --> 
        </div><!-- footer --> 
    </div><!-- page -->
</body>
</html>
。js公司:

$( document).ready(function (){
    url = \'http://hopexxx.com/category/daily-devotion/feed/\' ;
    $.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 < 10 ; i++) {
                var entry = postlist[i];
                html += \'<li>\';
                html += \'<a href="#">\';
                html += \'<div class="entry">\' + entry.title + \'</div>\' ;
                html += \'<div class="entry">\' + entry.author + \'</div>\' ;
                html += \'<div class="entry">\' + entry.publishedDate + \'</div>\';
                html += \'<div class="entry">\' + entry.contentSnippet + \'</div>\';
                html += \'</a>\';
                html += \'</li>\';
            }
            html += \'</ul>\';
            $( "#postlist" ).append(html);
           $( "#postlist ul[data-role=listview]" ).listview();

        }});
    });
我希望我的问题不在网站规则之外。

1 个回复
SO网友:Isaac Bassey

工作正常:添加了html+=“”;

html += \'<li>\';
html += \'<a href="\' + entry.link + \'">\';
html += \'<div class="entry">\' + entry.title + \'</div>\' ;
html += \'<div class="entry">\' + entry.author + \'</div>\' ;
html += \'<div class="entry">\' + entry.publishedDate + \'</div>\';
html += \'<div class="entry">\' + entry.contentSnippet + \'</div>\';
html += \'</a>\';
html += \'</li>\';

结束

相关推荐

jquery issue in functions.php

我正在处理的主题中有一个问题,我不知道如何解决它。该主题有几个jquery脚本,需要加载到头部才能工作。如果没有所有这些,主题就失败了。这是我打电话给的人jquery-1.8.2。最小jsjquery-1.6.1。min.jsjquery。放松。1.3。jsjquery-ui-1.8.11。风俗min.jsjquery-ui-1.8.21。风俗最小js现在使用WordPress,我想您可以将jquery排队,然后加载所有版本。我的问题是,当我尝试这样做并删除上面的脚本时,一切都失败了。我将所有脚本放入函数