我的javascript将无法正常工作
我正在尝试用HTML创建一个网站，使用javascript接收JSON格式的数据，然后它会将这些数据注入我的网站。
问题是我找不到任何错误。 我使用了这个示例代码 。 从我的网络服务器获取数据到我的HTML。 我使用上面链接的示例建立了与我的数据库的连接。 但后来我想在这里将现有代码移到这个例子中。
在上面的示例中，我链接了我的javascript文件，该文件获取数据并创建一个带有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 = ''+item.name+'
' + ''+item.latitude+'
' + item.longitude+'
'; output.append(landmark); }); }, error: function(){ output.text('There was an error loading the data.') } }); });
这是一个现场演示，代码在网络服务器上在线时加载。 但不是当它在当地。 是什么造成的？
http://codele.se/app/flip/debatt.html
由于增加了安全规则，混合文件和http是不好的。 我有一种感觉就是这里的问题。 您可以启动chrome，因此对安全规则的要求不那么严格。
尝试
chrome.exe -–allow-file-access-from-files
要么
chrome.exe --disable-web-security
或信息亭模式
chrome.exe --enable-kiosk-mode
在您的网站上使用firebug我发现您的html包含更新的数据，如下所示：
问题是你正在使用隐藏它的背景图片从你的网站删除这行代码：
我得到这个输出：
仔细看看我发现你有两个具有相同ID输出的html div，所以确保只有一个div具有output id bcoz ID在html中应该是唯一的。
尝试使用Firebug （或其他一些浏览器开发人员工具）并在Firebug控制台中检查从服务器收到的错误和数据。
编辑：好的。 你发布了你的JS代码。 你的代码看起来不错。 收到服务器的数据。 如果你在运行它之后什么也看不见。 可能你的HTML格式不正确。 在你的页面中是div元素还是其他id =“output”的东西？
您正在尝试实现JSONP，这是一种从不同域中的服务器请求数据的方法。 应该告诉你的数据源（通常是webservice）用它周围的函数调用来包装它的响应。 如果您的数据源没有包装响应，那么如果部署到实时环境，您的客户端将无法接收响应，尽管它在本地工作。
如果您有控制权或者您可以修改数据源function，那么您可以执行以下操作。 （如果不是，则无法实现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); } });
};
如果此代码无法正常工作，则必须进行其他操作。 根据这个JSFiddle ，代码工作正常。
检查以确保您的HTML中包含output ID的div，并且您实际上在页面上包含脚本fetch.js 。 检查浏览器开发人员工具的JS控制台是否存在其他错误。
编辑：您的CSS图像放置和h1标记属性导致数据无法正确显示。 如果我在CSS中将h1更改为h2 ，则标题（例如“Big Ben”）会正确显示。 但是，由于div output没有滚动，图像div img-cont img-1和div front覆盖了output一部分，你将看不到整个文本。
这是一个CSS /布局问题，而不是Javascript问题。 修复你的CSS。