Ajax功能在移动浏览器上不起作用 [英] Ajax function will not work on mobile browser
问题描述
您好，感谢您看看这个。非常新的jQuery / ajax等这个网站有FTP访问适当的服务器，所以我（据我所知）没有违反跨域政策。
这是网站工作正常在任何桌面浏览器，但不工作在任何移动浏览器。
我觉得问题很明显，但我不知道该怎么办。有人可以帮助我吗？
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> GRID Mobile< / title>
< meta name =viewportcontent =width = device-width，user-scalable = no/>
< link href =http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css =stylesheettype =text / css />
< script src =http://code.jquery.com/jquery-1.8.3.min.jstype =text / javascript>< / script>
< script src =http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.jstype =text / javascript>< /脚本>
< 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）。 = $（this）.find（title）。text（）;
var description = $（this）.find（description）text（）;
var linkUrl = $ ）.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 =pageid =page>
< div data-role =headerdata-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）。 function（）{
var title = $（this）.find（title）。text（）;
var description = $（this）.find（description）。
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（）{}）;
p>
实际的错误是
$ b，我们在OSX上测试了你的页面，并且确实有跨站点问题。$ b
XMLHttpRequest无法加载http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 Origin。 Access-Control-Allow-Origin不允许xxxx。
现在这是使用Safari web检查器从IPhone发出的错误。此外，当此文件不托管在Web服务器上并作为简单的HTML文件运行时，请求工作正常。
要解决此问题，您需要与网站管理员联系，并允许跨站点源，切换到检索问题的不同方法。还有其他方法可以尝试解决CORS问题。
对不起，如果这不是有用的。
FINAL EDIT：The actual problem。
从我可以告诉问题的是完全编码的网址 http://www.e-grid.net/BayAreaTech/wp-rss2.php？ cat = 1 。由于您在同一主机上的同一网络服务器上，我建议使用相对网址作为
/BayAreaTech/wp-rss2.php?cat=1
这样做的原因是如果你正在浏览没有www。在您的浏览器（或设备），则脚本认为它正在调用另一个服务作为URL完成匹配。但是，由于您在同一台服务器上托管该服务，您可以删除 http：// www 。
http://www.e-grid.net/mobile/index.html =nofollow> http://www.e-grid.net/mobile/index.html
当你这样做一切正常。现在试试。 （注意没有WWW）。这不工作，因为你现在正在执行交叉域（因为你有硬编码的www部分。部分在url。
http://e-grid.net/mobile/index.html
尝试以下脚本块。
< 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'>阅读更多< a>;
$（'＃feedContainer'）。append（'< h3>'+ title +'< / h3>< p>'+ description + link +'< / p&
}）;
}
}）;
}）;
< / script>
Hello and thanks for looking this over. Very new to jQuery/ajax etc. This website has FTP access to appropriate server, so I (as far as I know) am not violating cross-domain policy. This is website works fine on any desktop browser but does not work on any mobile browser. I feel like the issue is obviously but I don't know what to do. Can someone help me with This?
<!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>
Just a thought, have you tried wrapping your ajax call in a load event. I havent tested this on a mobile browser. However try.
<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>
Note the only changes was the $(function() { }); wrapping.
EDIT: Tested on OSX.
Just a quick FYI I tested your page on an IPhone 5s on OSX and there are definitly Cross site origin problems.
The actual error is
XMLHttpRequest cannot load http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 Origin. xxxx is not allowed by Access-Control-Allow-Origin.
Now this is the error that is coming from the IPhone using the Safari web inspector. Additionally when this file was not hosted on a webserver and run as a simple HTML file the request works fine. Its as soon as you host the file in a webserver you will get the CORS issue.
To resolve this you will need to contact the webmaster and allow cross site origin, switch to a different method of retrieving the issue. There are other methods to try and get around CORS issues.
Sorry if this is not that helpful.
FINAL EDIT: The actual problem.
Ok from what I can tell the problem is the fully coded url http://www.e-grid.net/BayAreaTech/wp-rss2.php?cat=1 in your script. As you are on the same webserver on the same host i would suggest using a relative url as
/BayAreaTech/wp-rss2.php?cat=1
The reason for this is if you are browsing without the www. in your browser (or device) then the script thinks it is calling another service as the URLs done match. However as you are hosting the service on the same server you can eliminate the http://www. part and this should work fine.
To test this open your desktop browser to.
http://www.e-grid.net/mobile/index.html
When you do this all works well. Now try. (note without the WWW). This does not work as you are now executing cross domain (as you have hard coded the www portion. portion in the url.
http://e-grid.net/mobile/index.html
Give this a try and let me know how it goes.
Try the following script 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>
这篇关于Ajax功能在移动浏览器上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
