从 Javascript 调用 Web 服务（传递参数并返回数据集）答案

【问题标题】：Calling a web service from Javascript (passing parameters and returning dataset)从 Javascript 调用 Web 服务（传递参数并返回数据集）
【发布时间】：2012-04-08 17:47:42
【问题描述】：

我在 C# 中创建了一个 Web 服务，现在需要从移动应用程序调用它。我正在尝试创建一个 Windows 7 移动应用程序，但使用 HTML5 和 Javascript 而不是本机代码。 Web 服务接受 2 个参数，电子邮件和密码，并返回一个数据集。我真的没有任何 javascript 经验（或 web 服务经验，试图通过这个项目学习），并且在尝试研究如何使用 javascript 调用 web 服务时，我发现太多信息并且不知道从哪里开始，因为还提到了许多其他技术。

所以我决定尝试一下，这就是我到目前为止的想法：

<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() {
      UpdateChildrenApp.PhoneWebServices.GetMyChildren(document.getElementById('EmailBox').value,document.getElementById('PasswordBox').value, OnComplete, OnError)
  }

  function OnComplete(result) {
      for (var i = 0; i < result.tables[0].rows.length; i++)
          document.getElementById('Test').innerHTML += ''+(result.tables[0].rows[i].col_name);
  }

  function OnError(result) {
     document.getElementById('Test').innerHTML ='Error :'+result.get_message();
  }

  </script>

当我按下提交按钮时，这段代码什么也不做。有人可以指出问题是什么以及如何解决它们或建议我应该研究什么来解决问题并使我走上正确的轨道吗？任何帮助是极大的赞赏。

【问题讨论】：

我的思维过程可能完全错误，但是您的页面不需要进行ajax化以将回调结果更新到UI中吗？
这是我的问题，我缺乏知道该做什么的背景知识，并且需要一些关于从哪里开始的指示，所以其他人必须确认您的建议。谢谢:)
由于第二条评论排序与我所说的内容相同，我在下面添加我的答案。

标签： c# javascript web-services windows-phone-7

【解决方案1】：

首先，如果您想在 javascript 中使用它，您的网络服务应该返回一个 JSON 对象。您当然可以返回任何 XML/字符串，但是使用 JSON 将非常容易使用 javascript 中的数据。

那么，我建议你使用jquery来调用webservice，因为jquery会为你做很多工作。

阅读this article，它应该可以帮助您正确设置不同的组件：

【讨论】：

当我访问该链接时，我收到了来自 Google Chrome 的恶意软件警告（前面的网站包含恶意软件）。请使用链接中的信息更新答案。

【解决方案2】：

我会使用 jQuery 来做这种事情。它提供的 ajax 功能真的很容易使用。我会使用显示模块模式 (RMP) 和 2 个 javascript 文件。如果您不熟悉 RMP，这里有一篇很棒的文章：

http://weblogs.asp.net/dwahlin/archive/2011/08/02/techniques-strategies-and-patterns-for-structuring-javascript-code-revealing-module-pattern.aspx

我发现如果我不使用 RMP 对我的 js 代码采用某种结构，我最终会在一个文件中得到一堆函数。

我有 Startup.js 和 Dataservice.js，它们看起来像这样：

Startup.js

var Startup = function () {
    var isValid,
        dataObject = {},

    populateDataObject = function () {
        dataObject.dealer = $("[id$='_txtUser']").val();
        dataObject.password = $("[id$='_txtPassword']").val();

    },

  init = function () {
        var dealerId = 0;

        $("[id$='_SubmitButton']").bind('click', function (evt) {
            evt.preventDefault();
            populateDataObject();


            if (isValid) {
                Dataservice.processLoginRequest(dataObject, processLoginRequestResult);
            }
        });
    };

    return {
        init: init,
        processLoginRequestResult: processLoginRequestResult
    };

} ();

Dataservice.js（假设是老式的 .asmx，根据需要进行更改）

var Dataservice = function () {

    $.ajaxSetup({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });

    var serviceBase = '../services/LoginService.asmx/',

    processScreenRequest = function (valObject, callback) {
        $.ajax({
            url: serviceBase + "ProcessLoginRequest",
            data: JSON.stringify(valObject),
            success: function (json) {
                callback(json);
            }
        });
    };

    return {
        processScreenRequest: processScreenRequest
    };

} ();

然后我会在我的 html 页面中包含对这 2 个 js 文件以及 jquery 的引用。我希望这会有所帮助。

【讨论】：

【解决方案3】：

我曾经为此使用过 Dojo，它非常简单，您可以发出 xhrget 或 xhrpost 请求。它有一个名为 load 的函数，它是一个回调函数，您可以在其中修改页面中 HTML 组件的内容。

使用这些链接：http://dojotoolkit.org/reference-guide/1.7/dojo/xhrGet.html

【讨论】：