Phonegap：接收到的 JSON 数据无法显示

Question

我正在尝试编写一个动态 phonegap 应用程序，该应用程序从实时数据库中检索和格式化信息。

我使用 jsonp 从我编写的 php 服务中获取数据。

$(document).ready(function(){

    var output = $('#output');

    $.ajax({
        url: 'http://example.com/service.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            //data loaded
            $.each(data, function(c,comp){
                window.alert(comp.filter); // I added this just to check I was getting data correctly.
                var company = '<div class="project-post ' +comp.filter+ ' ">'
                        +'<img  src=" ' +comp.img+ ' ">'
                        +'<div class="hover-box">'
                            +'<div class="project-title">'
                                +'<div><a href="coupons.html?id='+comp.id+'" rel="external"><i class="fa fa-arrow-right"></i></a></div>'
                            +'</div></div></div>';

                    output.append(company);
            });
        },
        error: function(){
            //error loading data
            output.text('Error loading data.');
        }
    });
});

我的控制台没有显示任何错误，我已经尝试解决这个问题很长时间了。我的配置中有这个：

<access origin="*" />

我还确认我收到了 window.alert(comp.filter); 的数据，它根本不显示，可能是我的格式有问题，但无法弄清楚它是什么。

Answer 1

我认为是dom格式的问题，img标签没有正确关闭应该是这样的：

var company = '<div class="project-post ' +comp.filter+ ' ">' +'<img src=" ' +comp.img+ ' "/>' +'<div class="hover-box">' +'<div class="project-title">' +'<div><a href="coupons.html?id='+comp.id+'" rel="external"><i class="fa fa-arrow-right"></i></a></div>' +'</div></div></div>';

还要注意您的访问策略以允许所有 url，使用以下代码更新您的 config.xml 文件：

<access origin="*" />