5

自分で作成したASP.NetWebサービスを使用して、Android SDKとJavaパッケージを使用してネイティブAndroidアプリを作成しましたが、正常に動作します。しかし今、私はこのクロスプラットフォームを作りたいと思っています。PhonegapとjQueryMobileがこれに役立つと聞きましたが、それでも少し混乱しています。

  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.NETWebサービスは

[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;
}
}

Webサービスと一緒にhtmlファイルをホストすると、結果が得られます。しかし、Androidアプリからローカルのhtmlファイルを使用して呼び出そうとすると失敗します。何が悪かったのかわかりません。

ここで何が悪かったのか誰か教えてもらえますか?これが私がウェブサービスから得た応答であり、それをJSONに解析します

WebサービスとともにホストされるHTML

phonegap.xml

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

4 に答える 4

8

ローカルのhtmlを使用し、WebサービスへのXHR呼び出しを使用してサーバーデータを取得してから、Webサービスのデータをhtmlに表示する必要があります。

コードを見た後に編集します。

問題はURLです。localhostを使用することはできません。これは、デバイスでテストする場合、localhostがデバイスであり、デバイスにWebサービスがない場合は、マシンのローカルIPを使用する必要があるためです。http://192.168.1.XXX:1000/WebSite2/Service.asmx/HelloWorld

編集2:コードをテストして動作させました。これを変更してください。jsonArray [i] .Resultは機能しませんでした。未定義が返されますが、名前を使用した例では、jsonオブジェクトのすべての属性にアクセスできます。そして、リフレッシュをforの外に置きます。毎回ではなく、終了時にリフレッシュするだけ;で、最後に置くことができます。

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

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

それでも機能しない場合は、ドメイン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>
于 2012-11-10T16:40:33.770 に答える
3

あなたが持っている問題は、あなたがあなたのコンピュータのエミュレーターであなたのプログラムを実行するときだけ、あなたがあなたのモバイルデバイスからあなたのウェブサービスにアクセスすることができないということです。これを行う必要があります:

  • ローカルホストではなく、サーバーにWebサービスを配置します。
  • クロスドメインの問題がないように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の最新バージョンを使用する必要があります。jQMCSSとJSがバージョンで一致していないことを確認してください。

于 2012-11-12T08:45:46.547 に答える
2

データを示すHTMLファイルとアプリでWebサービスを呼び出すJSを含める必要があります。データインジェクション(たとえば、XHR呼び出しによるJSONまたはXML)を介して、Webサービスからデータをプルできます。これは、HTML + JSがWebサービスからのデータを処理して表示できるように、Webサービスが要求されたデータをJSONまたはXMLで出力する必要があることを意味します。これは、PhoneGapSDKまたはPhoneGapBuildを使用して行うことができます。

私が個人的に気に入っている簡単な例は、http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/にあります。ASP.NETの代わりにPHP/MySQLで動作しますが、概念は基本的に同じだと思います。

于 2012-11-10T23:35:28.200 に答える
2

これは私が見つけた良い例ですhttp://www.idesigncity.co.uk/how-to-fetch-json-data-from-phonegap 通常はJSONまたはXML呼び出しが答えになります。そこにzipをダウンロードします

于 2013-02-05T09:06:57.563 に答える