edw*_*win 5 javascript android jquery-mobile cordova
我使用Android SDK和java包创建了一个原生的Android应用程序,使用我创建的ASP.Net Web服务,它工作正常.但现在我想制作这个跨平台的.我听说Phonegap和jQuery Mobile会对此有所帮助,但我仍然有点困惑.
有人可以指导我吗?
我的演示代码是
JAVA SCRIPT
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script src="jquery-1.7.2.min"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8"/></script>
<link rel="stylesheet" src="jquery.mobile-1.1.1.min.css"/>
<script type="text/javascript">
function onDeviceReady() {}
document.addEventListener("deviceready", onDeviceReady, false);
function LoginButton_onclick() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "http://182.72.192.18/webservicedemo/service.asmx/HelloWorld",
data: '{}',
success: function(msg) {
jsonArray = $.parseJSON(msg.d);
var $ul = $( '<ul id="details">' );
for(i=0; i < jsonArray.length; i++)
{
$("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>' );
} $('#details').listview('refresh');
},
error: function(msg) {
alert("Error");
}
});
</script>
Run Code Online (Sandbox Code Playgroud)
HTML
<div data-role="page" id="Page1">
<h1>DEMO PAGE</h1>
<div id="DEMO">
<input id="LoginButton" type="button" value="GET DATA" onclick="LoginButton_onclick()" /></div>
<div id="divList" data-role="content">
<ul id="details" data-role="listview" data-inset="true"></ul>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
我的ASP.NET Web服务是
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService{
JavaScriptSerializer serializer = new JavaScriptSerializer();
public Service () {}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string HelloWorld() {
List<clsDetails> deailsList = new List<clsDetails>{
new clsDetails(1,"BOY","SCHOOL"),
new clsDetails(2,"GIRL","COLLEGE"),
new clsDetails(3,"MAN","OFFICE")};
string detail = serializer.Serialize(deailsList);
return detail;
}
}
Run Code Online (Sandbox Code Playgroud)
如果我将html文件与我的网络服务一起托管,它会为我提供结果.但是当我尝试使用Android应用程序中的本地html文件进行调用时,它失败了.我无法弄清楚出了什么问题.
谁能告诉我这里出了什么问题?看看这里是我从Web服务获得的响应,我将其解析为JSON

phonegap.xml
<phonegap>
<access origin="http://182.72.192.18" />
</phonegap>
Run Code Online (Sandbox Code Playgroud)
您必须使用本地html并使用对Web服务的XHR调用获取服务器数据,然后在您的html中显示您的Web服务的数据.
看到代码后编辑:
问题是网址.您不能使用localhost,因为如果您在设备上进行测试,localhost是设备,并且设备没有Web服务,则必须使用计算机的本地iP.http://192.168.1.XXX:1000/WebSite2/Service.asmx/HelloWorld
编辑2:我刚刚测试了你的代码并让它为我工作,只需改变它.jsonArray [i] .Result对我不起作用,它返回undefined,但你可以访问json对象的每个属性,在我使用名称的例子中.把刷新放在外面,你只需要在完成时刷新,而不是每次都刷新,并把它;放在最后.
for(i=0; i < jsonArray.length; i++)
{
$("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>' );
}
$('#details').listview('refresh');
Run Code Online (Sandbox Code Playgroud)
如果仍然无效,请检查您是否将域名phonegap白名单指南列入白名单
完整的工作代码
<!DOCTYPE html>
<html>
<head>
<title>DEMO</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<title>DEMO</title>
<script type="text/javascript" charset="utf-8">
function LoginButton_onclick() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "http://182.72.192.18/webservicedemo/service.asmx/HelloWorld",
data: '{}',
success: function(msg) {
jsonArray = $.parseJSON(msg.d);
var $ul = $( '<ul id="details">' );
for(i=0; i < jsonArray.length; i++)
{
$("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>' );
}
$('#details').listview('refresh');
},
error: function(msg) {
alert("Error");
}
});
}
</script>
</head>
<body>
<div data-role="page" id="Page1">
<h1>DEMO PAGE</h1>
<div id="DEMO">
<input id="LoginButton" type="button" value="GET DATA" onclick="LoginButton_onclick()" /></div>
<div id="divList" data-role="content">
<ul id="details" data-role="listview" data-inset="true"></ul>
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
23760 次 |
| 最近记录: |