gpt4 book ai didi

javascript - Ajax 功能不适用于移动浏览器

转载 作者:行者123 更新时间:2023-11-29 14:54:38 26 4
gpt4 key购买 nike

您好,感谢您查看此内容。对 jQuery/ajax 等非常陌生。这个网站可以通过 FTP 访问适当的服务器,所以我(据我所知)没有违反跨域策略。这个网站在任何桌面浏览器上都能正常工作,但不能在任何移动浏览器上工作。我觉得问题很明显,但我不知道该怎么办。有人可以帮我解决这个问题吗?

<!DOCTYPE html> 
<html>

<head>
<meta charset="utf-8">
<title>GRID Mobile</title>
<meta name = "viewport" content="width=device-width, user-scalable=no"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajax({
type: 'GET',
url: 'http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>'+title+'</h3><p>'+description+link+'</p>');
});
}
});
</script>

</head>
<body>

<div data-role="page" id="page">



<div data-role="header" data-theme="b">


<h1>GRID MOBILE</h1>

</div>
<div data-role="content">
<div id="feedContainer"></div>
<h3></h3>
<p></p>

</div>
<div data-role="footer">
<h4>Advertisements</h4>
</div>
</div>


</body>
</html>

最佳答案

只是想一想,您是否尝试过将 ajax 调用包装在加载事件中。我还没有在移动浏览器上测试过这个。但是请尝试。

<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: 'http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
});
}
});
});
</script>

请注意,唯一的变化是 $(function() { }); 包装。

编辑:在 OSX 上测试。

仅供引用,我在 OSX 上的 iPhone 5s 上测试了您的页面,确实存在跨站点来源问题。

实际错误是

XMLHttpRequest cannot load http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 Origin. xxxx is not allowed by Access-Control-Allow-Origin.

现在这是来自 iPhone 使用 Safari 网络检查器的错误。此外,当此文件未托管在网络服务器上并作为简单的 HTML 文件运行时,请求工作正常。只要您将文件托管在网络服务器中,您就会遇到 CORS 问题。

要解决此问题,您需要联系网站管理员并允许跨站点来源,切换到其他检索问题的方法。还有其他方法可以尝试解决 CORS 问题。

抱歉,如果这没有帮助。

最终编辑:实际问题。

好的,据我所知问题是完全编码的 url http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 在你的脚本中。由于您在同一主机上的同一网络服务器上,我建议使用相对 url 作为

/BayAreaTech/wp-rss2.php?cat=1

这是因为如果您在没有 www 的情况下浏览。在您的浏览器(或设备)中,脚本认为它正在调用另一个服务,因为 URL 匹配。但是,由于您在同一台服务器上托管该服务,因此您可以删除 http://www。部分,这应该可以正常工作。

要对此进行测试,请打开您的桌面浏览器。

http://www.e-grid.net/mobile/index.html

当您执行此操作时,一切正常。现在试试。 (注意没有 WWW)。这不起作用,因为您现在正在执行跨域(因为您已经对 www 部分进行了硬编码。url 中的部分。

http://e-grid.net/mobile/index.html

试一试,让我知道结果如何。

尝试以下脚本 block 。

<script type="text/javascript">
$(function () {
$.ajax({
type: 'GET',
url: '/BayAreaTech/wp-rss2.php?cat=1',
dataType: 'xml',
success: function (xml) {
$(xml).find("item").each(function () {
var title = $(this).find("title").text();
var description = $(this).find("description").text();
var linkUrl = $(this).find("link").text();
var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
$('#feedContainer').append('<h3>' + title + '</h3><p>' + description + link + '</p>');
});
}
});
});
</script>

关于javascript - Ajax 功能不适用于移动浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19942292/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com