【问题标题】:Phonegap, jQueryMobile And Web servicePhonegap、jQueryMobile 和 Web 服务
【发布时间】:2012-11-10 16:24:23
【问题描述】:

我使用我创建的 ASP.Net Web 服务,使用 Android SDK 和 java 包创建了一个原生 Android 应用程序,它运行良好。但现在我想做这个跨平台的。听说 Phonegap 和 jQuery Mobile 可以解决这个问题,但我还是有点困惑。

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

有人可以指导我吗?

我的演示代码是

JAVA 脚本

<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 文件进行调用时,它失败了。 我不知道出了什么问题。

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

phonegap.xml

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

【问题讨论】:

  • 你看过phonegap网站吗?它有很好的记录。
  • @jiggy 我并不是说它是一个网站 .. 我问的是 phone-gap 可以用来调用动态 Web 服务。有什么办法呢?
  • 我的意思是去phonegap.com 阅读文档,然后再提出真正的基本问题。在发帖之前尝试在 Google 上搜索您的问题。
  • @jiggy 我的代码在这里,你能帮我找出问题所在吗?我是网络技术和 js 的新手。我没找到问题所在

标签: javascript android cordova jquery-mobile


【解决方案1】:

您必须使用本地 html 并使用 XHR 调用您的 Web 服务来获取服务器数据,然后在您的 html 中显示您的 Web 服务的数据。

看到代码后编辑:

问题是网址。你不能使用localhost,因为如果你在一个设备上测试,localhost是设备,而设备没有webservice,你必须使用你机器的本地iP。 http://192.168.1.XXX:1000/WebSite2/Service.asmx/HelloWorld

编辑 2: 我刚刚测试了你的代码并让它为我工作,只需改变它。 jsonArray[i].Result 对我不起作用,它返回未定义,但您可以访问 json 对象的每个属性,在示例中我使用了名称。 并且把refresh放在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>

【讨论】:

  • 实际上我的问题是我使用 web 服务托管 html 并且工作正常,并且我也将输出结果输出到 html 文件。但是当我将它用作我的 android 应用程序的本地 html 文件时,它不起作用。我不知道出了什么问题?
  • 不看代码很难说,但如果你也打算为 iOS 制作应用程序,建议使用 xml/json 网络服务而不是 html 服务。确保你使用完整的 url 到你的 web 服务 (example.com/yourwebservice) 并确保你没有在本地 html 中使用任何服务器语言(在本地 html 中使用 php 是一个常见错误,但 phonegap 无法执行 php)
  • 我没有在我的 html 中使用 php(我不知道 PHP),谢谢您提供的信息
  • 检查我上次的编辑,您的代码稍加改动即可为我工作。
  • 我刚刚更新了我使用的完整工作代码,因此,如果您将该代码粘贴到您的 index.html 中替换您拥有的所有代码,但它仍然无法正常工作,这不是代码问题,是配置问题。
【解决方案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 版本不匹配。

【讨论】:

  • 检查我托管服务的 java 脚本,它仍然显示错误
  • 我已经在html页面中发布了我的回复,你可以看看它
  • 不知道为什么这回答了 OP 但它解决了我的问题,谢谢 mram
【解决方案3】:

您需要在您的应用中包含显示数据的 HTML 文件 + 调用 Web 服务的 JS。通过数据注入(例如通过 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 一起工作,但我认为概念基本相同。

【讨论】:

  • 我提供了我的 html、js 和 web 服务代码,但我面临的问题是,如果我将 html 文件与我的 web 服务一起托管,它会为我提供结果。但是当我尝试使用来自 android 应用程序的本地 html 文件进行调用时,它失败了。我不知道出了什么问题..
  • 如果我与我的 web 服务一起托管,我的代码可以工作,但是当我在本地使用它时它不会.. 我的意思是它转到 ajax 调用的错误部分并向我显示自定义错误警报(请参考我的脚本部分)...我不知道它在哪里失败..我的控制台没有显示任何错误
【解决方案4】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多