Phonegap，jQueryMobile和Web服务

Question

I created a native Android app using the Android SDK and java packages, using a ASP.Net Web service created by me, and it works fine. 我使用Android SDK和java包创建了一个原生的Android应用程序，使用我创建的ASP.Net Web服务，它工作正常。 But now I want to make this cross-platform. 但现在我想制作这个跨平台的。 I heard that Phonegap and jQuery Mobile will help with this, but I am still a bit confused. 我听说Phonegap和jQuery Mobile会对此有所帮助，但我仍然有点困惑。

Is it necessary to host the HTML file that uses Javascript to work properly? 是否有必要托管使用Javascript正常工作的HTML文件？ OR 要么
Can I include the HTML and js file in my application and call the web service methods? 我可以在我的应用程序中包含HTML和js文件并调用Web服务方法吗？

Can somebody please guide me? 有人可以指导我吗？

MY Demo Code is 我的演示代码是

JAVA SCRIPT 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 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>

and my ASP.NET Web Service is 我的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;
}
}

if i host the html file along with my web-service it provide me result . 如果我将html文件与我的网络服务一起托管，它会为我提供结果。 but when i try to call using a local html file from android app it fails. 但是当我尝试使用Android应用程序中的本地html文件进行调用时，它失败了。 i can't figure out what went wrong. 我无法弄清楚出了什么问题。

Can anyone tell me what went wrong here? 谁能告诉我这里出了什么问题？ Look here is the response i get from web-service and i parse that to JSON 看看这里是我从Web服务获得的响应，我将其解析为JSON

与WEBSERVICE一起主持的HTML

phonegap.xml phonegap.xml

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

Answer 1

You have to use a local html and get the server data using XHR calls to your webservice, and then show the data of your webservice in your html. 您必须使用本地html并使用对Web服务的XHR调用获取服务器数据，然后在您的html中显示您的Web服务的数据。

Edit after seeing the code: 看到代码后编辑：

The problem is the url. 问题是网址。 You can't use localhost, because if you test on a device, localhost is the device, and the device doesn't have the webservice, you have to use the local iP of your machine. 您不能使用localhost，因为如果您在设备上进行测试，localhost是设备，并且设备没有Web服务，则必须使用计算机的本地iP。 http://192.168.1.XXX:1000/WebSite2/Service.asmx/HelloWorld http://192.168.1.XXX:1000/WebSite2/Service.asmx/HelloWorld

Edit 2: I just tested your code and got it working for me, just change this. 编辑2：我刚刚测试了你的代码并让它为我工作，只需改变它。 The jsonArray[i].Result didn't work for me, it return undefined, but you can access to every attribute of the json object, in the example I used the name. jsonArray [i] .Result对我不起作用，它返回undefined，但你可以访问json对象的每个属性，在我使用名称的例子中。 And put the refresh outside the for, you only have to refresh when you finish, not every time, and put the ; 并且把刷新放在外面，你只需要在完成时刷新，而不是每次都刷新; at the end. 在末尾。

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

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

If it still don't work, check if you whitelisted the domain phonegap whitelist guide 如果仍然无效，请检查您是否将域名phonegap白名单指南列入白名单

Full working code 完整的工作代码

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

The problem that you have it's that you can't access your webservice from your mobile device, only when you run your program with your computer's emulator. 您遇到的问题是，只有当您使用计算机的模拟器运行程序时，才能从移动设备访问您的Web服务。 You must do this: 你必须这样做：

Have your webservice in a server, not in localhost. 将您的Web服务放在服务器中，而不是在localhost中。

Edit res/xml/cordova.xml for no crossdomain problems. 编辑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 -->

With these steps your program will function perfectly. 通过这些步骤，您的程序将完美运行。

Edit 编辑

I've seen that the type you're returning in your WS is not in JSON style. 我已经看到你在WS中返回的类型不是JSON样式。 Your response is something between XML and JSON. 您的响应是XML和JSON之间的响应。 When you get the correct return value of the WebMethod everything will go OK. 当您获得WebMethod的正确返回值时，一切都会正常。

You must use last version of Cordova and jQM. 您必须使用最新版本的Cordova和jQM。 See that your jQM CSS and JS don't match in versions. 看到你的jQM CSS和JS在版本中不匹配。

Answer 3

You need to include the HTML file showing the data + JS calling the web service with your app. 您需要包含显示数据的HTML文件+ JS使用您的应用调用Web服务。 Through data injection (eg JSON or XML through XHR calls), you can pull the data from your web service. 通过数据注入（例如通过XHR调用的JSON或XML），您可以从Web服务中提取数据。 This means that your web service should output the requested data in JSON or XML so that your HTML + JS will be able to process and show the data from your web service. 这意味着您的Web服务应该以JSON或XML输出所请求的数据，以便您的HTML + JS能够处理并显示来自Web服务的数据。 You can do this with PhoneGap SDK or even PhoneGap Build. 您可以使用PhoneGap SDK甚至PhoneGap Build来完成此操作。

A simple example that I personally like can be found here: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ . 我个人喜欢的一个简单示例可以在这里找到： http ： //coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/ 。 Instead of ASP.NET, it works with PHP / MySQL, but the concept is basically the same, I would think. 它可以与PHP / MySQL一起使用，而不是ASP.NET，但我认为这个概念基本相同。

Answer 4

This is a good example I found http://www.idesigncity.co.uk/how-to-fetch-json-data-from-phonegap Usually JSON or XML call will be your answer. 这是一个很好的例子我发现http://www.idesigncity.co.uk/how-to-fetch-json-data-from-phonegap通常JSON或XML调用将是你的答案。 Download the zip in there 在那里下载zip

Phonegap，jQueryMobile和Web服务

问题描述

4 个解决方案

解决方案1
8 已采纳 2012-11-10 16:40:33

解决方案2
3 2012-11-12 08:45:46

解决方案3
2 2012-11-10 23:35:28

解决方案4
2

Phonegap，jQueryMobile和Web服务

问题描述

4 个解决方案

解决方案1 8 已采纳 2012-11-10 16:40:33

解决方案2 3 2012-11-12 08:45:46

解决方案3 2 2012-11-10 23:35:28

解决方案4 2

解决方案1
8 已采纳 2012-11-10 16:40:33

解决方案2
3 2012-11-12 08:45:46

解决方案3
2 2012-11-10 23:35:28

解决方案4
2