使用jQuery Mobile访问Web服务

时间:2012-03-31 10:59:26

标签: jquery web-services windows-phone-7 cordova

我正在使用PhoneGap开发Windows Phone 7应用程序。我正在尝试调用一个Web服务,它返回一个Child对象列表(它是一个社交工作者的研究项目)作为JSON字符串。这是我到目前为止所得到的:

       <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title>Login Page</title>

      <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>

      <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
      <script type="text/javascript"" src="../Scripts/jquery.mobile-1.0.1.js"></script>

      <script type="text/javascript">

          document.addEventListener("deviceready", onDeviceReady, false);

          // once the device ready event fires, you can safely do your thing! -jm
          function onDeviceReady() {

          }

          function LoginButton_onclick() {
          var email=document.getElementById("EmailBox").value;
          var pass=document.getElementById("PasswordBox").value;
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "http://localhost:56018/PhoneWebServices.asmx?op=GetMyChildren",
              data: '{ "email" : "' + email + '", "password": "' + pass + '" }',
              dataType: "json",
              success: GetChildrenSuccess,
              failure: GetChildrenFailed
          });
      }

      function GetChildrenSuccess(response) {
          var children = eval('(' + response.d + ')');
          var child;
          for(child in children) {
              document.getElementById('ResultsDiv').innerHTML = "ID: "+child.ID+ " Name: "+child.Name+" Surname: "+child.Surname+" \r\n";
          }
      }

      function GetChildrenFailed(error) {
          document.getElementById('ResultsDiv').innerHTML = "Error";
      }
      </script>

  </head>
  <body>
    <h1>Please Login:</h1>

    <div id="LoginDiv">
        Email: <input id="EmailBox" type="text" /><br />
        Password: <input id="PasswordBox" type="password" /><br />

        <input id="LoginButton" type="button" value="Submit" onclick="LoginButton_onclick()" />
    </div>
    <div id="ResultsDiv">
    </div>
  </body>
</html>

网络服务:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class GetChildren : System.Web.Services.WebService {

public GetChildren () {

    //Uncomment the following line if using designed components 
    //InitializeComponent(); 
}

MD5 md5Hash = MD5.Create();
    string conString = ConfigurationManager.ConnectionStrings["SponsorChildDatabase"].ConnectionString;

    [WebMethod(Description = "Returns the list of children for whom the social worker is responsible.")]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public String GetMyChildren(String email, String password)
    {
        DataSet MyChildren = new DataSet();

        int ID = SocialWorkerLogin(email, password);
        if (ID > 0)
        {
            MyChildren = FillChildrenTable(ID);
        }
        MyChildren.DataSetName = "My Children"; //To prevent 'DataTable name not set' error

        List<Child> children = new List<Child>();
        foreach (DataRow rs in MyChildren.Tables[0].Rows)
        {
            Child c=new Child( rs["Child_ID"].ToString(), rs["Child_Name"].ToString(), rs["Child_Surname"].ToString() );
            children.Add(c);
        }

        // Return JSON data
        JavaScriptSerializer js = new JavaScriptSerializer();
        string strJSON = js.Serialize(children);
        return strJSON;
    }

儿童班:

public class Child
{
    String id;

    public String ID
    {
        get { return id; }
        set { id = value; }
    }
    String name;

    public String Name
    {
        get { return name; }
        set { name = value; }
    }
    String surname;

    public String Surname
    {
        get { return surname; }
        set { surname = value; }
    }

    public Child(String Cid, String Cname, String Csurname)
    {
        this.ID = Cid;
        this.Name = Cname;
        this.Surname = Csurname;
    }
}

当我自己测试网络服务(即在我的常规浏览器中输入网址)时,它可以正常工作,但按下提交按钮在我的移动应用程序中没有做任何事情。

这是我的第一个移动应用程序,所以我甚至不知道如何正确调试它,并且不知道问题是什么,因为它似乎什么都不做。我想也许Web服务需要在IIS中托管(也没有经验)但是因为它让我添加服务引用它似乎找到它。任何想法可能是什么问题/我的方法是否正确?

1 个答案:

答案 0 :(得分:2)

我看到一些我想引起你注意的问题。

  1. 不要使用getElementById,因为你已经在使用jQuery,$('#id')要好得多。

  2. 要在$ .ajax方法中发布数据,使用JSON.stringify(数据)要好得多,而不是自己构造字符串对象。

  3. 你在回调函数中做了eval,这是错误的。 jQuery为您做初始评估。您必须这样做,因为您使用的是错误的Web服务。永远不要通过yourseft进行json序列化,永远不要返回字符串。返回对象,ASMX将自动为您进行序列化。

  4. 不幸的是,你的问题并不具体,所以很难给出答案。由于您的应用是网络移动应用,因此您只需在浏览器中启动即可。使用FireBug或Chrome开发工具来调试JS,看看有什么问题。使用Visual Studio调试服务代码。