Question

我使用Android SDK和java软件包创建了一个原生Android应用程序，使用我创建的ASP.Net Web服务，它运行正常。但现在我想制作这个跨平台的。我听说Phonegap和jQuery Mobile会对此有所帮助，但我仍然有点困惑。

是否需要托管使用Javascript正常工作的HTML文件？ OR
我可以在我的应用程序中包含HTML和js文件并调用Web服务方法吗？

有人可以指导我吗？

我的演示代码是

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>

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>

我的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;
}
}

如果我将html文件与我的网络服务一起托管，它会为我提供结果。但是当我尝试使用Android应用程序中的本地html文件进行调用时，它失败了。我无法弄清楚出了什么问题。

谁能告诉我这里出了什么问题？看这里是我从Web服务获得的响应，我将其解析为JSON

HTML HOSTED ALONG WITH WEBSERVICE

phonegap.xml

<phonegap>  
<access origin="http://182.72.192.18" /> 
</phonegap>

Answer 1

您必须使用本地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之外，只需在完成时刷新，而不是每次都刷新，并将;放在最后。

for(i=0; i < jsonArray.length; i++)
    {
  $("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>' );

}
$('#details').listview('refresh');

如果仍然无效，请检查您是否将域phonegap whitelist guide

列入白名单

完整的工作代码

<!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>

Answer 2

您遇到的问题是，只有当您使用计算机的模拟器运行程序时，才能从移动设备访问您的Web服务。你必须这样做：

将您的网络服务放在服务器中，而不是在localhost中。

编辑res / xml / cordova.xml以查找没有跨域问题。

<!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
<!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
<!-- <access origin=".*"/> Allow all domains, suggested development use only -->

通过这些步骤，您的程序将完美运行。

修改

我已经看到你在WS中返回的类型不是JSON样式。您的响应是XML和JSON之间的响应。当您获得WebMethod的正确返回值时，一切都会正常。

您必须使用最新版本的Cordova和jQM。请注意您的jQM CSS和JS在版本中不匹配。

Answer 3

您需要包含显示数据的HTML文件+ JS使用您的应用调用Web服务。通过数据注入（例如，通过XHR调用的JSON或XML），您可以从Web服务中提取数据。这意味着您的Web服务应该以JSON或XML输出所请求的数据，以便您的HTML + JS能够处理并显示来自Web服务的数据。您可以使用PhoneGap SDK甚至PhoneGap Build来完成此操作。

我个人喜欢的一个简单例子可以在这里找到：http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/。而不是ASP.NET，它适用于PHP / MySQL，但我认为这个概念基本相同。

Answer 4

我发现这是一个很好的例子http://www.idesigncity.co.uk/how-to-fetch-json-data-from-phonegap 通常JSON或XML调用将是您的答案。在那里下载拉链

Phonegap，jQueryMobile和Web服务

4 个答案: