0

我正在尝试在 HTML 中创建一个网站，该网站使用 javascript 接收 JSON 格式的数据，然后它将将该数据注入我的网站。

问题是我找不到任何错误。我使用了这个示例代码。将数据从我的网络服务器获取到我的 HTML 中。我使用上面链接的示例建立了与我的数据库的连接。但是后来我想把现有的代码移到这里的这个例子中。

在上面的示例中，我链接了我的 javascript 文件，该文件获取数据并使用 a 创建一个 div，与获取数据的 javascript 文件中分配id的相同。id但它根本行不通。在div那个将充满数据的地方，只是空的。

获取.js

$(document).ready(function(){
    var output = $('#output');

    $.ajax({
        url: 'http://samcroft.co.uk/demos/updated-load-data-into-phonegap/landmarks.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){ 
                var landmark = '<h1>'+item.name+'</h1>'
                + '<p>'+item.latitude+'<br>'
                + item.longitude+'</p>';

                output.append(landmark);
            });
        },
        error: function(){
            output.text('There was an error loading the data.')
        }
    });
});

这是一个现场演示，代码在网络服务器上在线时正在加载。但不是在本地时。这是什么原因造成的？

http://codele.se/app/flip/debatt.html

4

5 回答 5

1

由于增加了安全规则，混合文件和 http 是不好的。我有一种感觉，这就是问题所在。您可以启动 chrome，因此它对安全规则的要求不那么严格。

尝试

chrome.exe -–allow-file-access-from-files

或者

chrome.exe --disable-web-security

或信息亭模式

chrome.exe  --enable-kiosk-mode
于 2013-01-14T13:38:11.743 回答
1

在您的网站上使用 firebug 时，我发现您的 html 包含更新的数据，如下所示：

代码

问题是您使用的背景图像在从您的站点中删除这行代码时将其隐藏：

<div style="z-index: 3; left: 512px; transform: rotateY(0deg);" class="page cover">

我得到这个输出：

输出

仔细一看，我发现您在 html 中有两个具有相同 ID 输出的 div，因此请确保只有一个 div 具有outputid bcoz ID 在 html 中应该是唯一的。

错误

于 2013-01-14T13:46:26.683 回答
0

如果此代码对您无法正常工作，则一定有其他事情发生。根据这个 JSFiddle，代码可以正常工作。

检查以确保您的outputHTML 中有一个 id 为 的 div，并且您实际上fetch.js在页面上包含了该脚本。检查浏览器开发工具的 JS 控制台是否有其他错误。

编辑：您的 CSS 图像放置和h1标签属性导致数据无法正确显示。如果我在您的 CSS 中更改为h1，h2标题（例如“Big Ben”）会正确显示。但是，由于您的 div 没有滚动output，并且图像 divimg-cont img-1和 divfront覆盖了您的一部分，您output将永远看不到整个文本。

这是 CSS/布局问题，而不是 Javascript 问题。修复你的 CSS。

于 2013-01-14T13:14:05.853 回答
0

您正在尝试实现 JSONP，这是一种从不同域中的服务器请求数据的方法。应该告诉您的数据源（通常是 web 服务）用围绕它的函数调用来包装它的响应。如果您的数据源没有包装响应，那么如果部署到实时环境，您的客户端将无法接收响应，尽管它在本地工作。

如果您有控制权或可以修改数据源函数，则可以执行以下操作。（如果不是，则不可能实现 JSONP）。我的示例中的数据源是 REST 服务。

//数据源（REST服务）

 [WebGet(UriTemplate = "getdata?callback={callback}&testParam1={p1}&testParam2={p2}")]
    public void GetData(string testParam1, string testParam2, string callback)
    {
        //Callback method is one of the parameters
        WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
        var data = _db.GetRecords(testParam1, testParam2);
        //wrap the response 
        HttpContext.Current.Response.Write(string.Format("{0}( {{ result:\"{1}\"}} )", callback, data));
    }

//客户端实现

function GetMainMarket(holder, template, testParam1, testParam2) {
$.ajax({
    type: 'GET',
    url: 'http://localhost:2520/DataServices/getdata',
    data: { testParam1: 'test1', testParam2: 'test2' },
    dataType: 'jsonp',
    success: function (data) {
        eval(data.result);
        var output = $(template).parseTemplate(json);
        $('#' + holder).html(output);
    }
});

};

于 2013-01-14T13:28:37.987 回答
0

尝试使用Firebug（或其他浏览器开发工具）并在 Firebug 控制台中检查从服务器接收到的错误和数据。

编辑：好的。您发布了您的 JS 代码。您的代码看起来不错。接收来自服务器的数据。如果你在运行这个之后什么也没看到。可能您的 HTML 格式不正确。您的页面中是 div 元素还是其他 id="output" 的元素？

于 2013-01-14T13:05:13.583 回答