Question

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

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

在上面的示例中，我链接了我的javascript文件，该文件获取数据并使用a id创建div，相同的id在javascript文件中分配，用于获取数据。但它根本不起作用。在将填充数据的div中，只是空的。

fetch.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

Answer 1

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

尝试

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

或

chrome.exe --disable-web-security

或自助服务终端模式

chrome.exe  --enable-kiosk-mode

Answer 2

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

Code

问题是你正在使用隐藏它的背景图片从你的网站上删除这行代码：

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

我得到了这个输出：

output

仔细观察我发现你有两个具有相同ID输出的html div，所以确保只有一个div具有output id bcoz ID在html中应该是唯一的。

error

Answer 3

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

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

Answer 4

如果此代码无法正常运行，则必须继续执行其他操作。每this JSFiddle代码运行正常。

检查以确保您的HTML中包含ID为output的div，并且您实际上在页面上包含了脚本fetch.js。检查浏览器开发人员工具的JS控制台是否存在其他错误。

编辑：您的CSS图片展示位置和h1标记属性导致数据无法正确显示。如果我将CSS中的h1更改为h2，则标题（例如“大本”）会正确显示。但是，由于您的div output没有滚动，而图片div img-cont img-1和div front覆盖了output的一部分，您将永远不会看到全文。

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

Answer 5

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

如果您有控制权或者您可以修改数据源功能，那么您可以执行以下操作。（如果不是，则无法实现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);
    }
});

};

我的javascript将无法正常工作

5 个答案: