jQuery调用WebService实战：传参与接收各种返回值

本文将介绍如何使用jQuery调用ASP.NET的WebService，并通过具体的代码示例展示不同的调用方法，包括无参数调用、传入参数、返回集合、返回复合类型以及返回DataSet（XML）。 首先，让我们从HTML部分开始。在.aspx文件中，我们创建了五个按钮，每个按钮对应一个不同的WebService调用。这些按钮没有实际的链接地址（href="#"），而是用于触发jQuery事件。当用户点击按钮时，jQuery会调用相应的WebService方法并显示结果。页面上还有一个"服务器处理中，请稍后"的提示区域和一个用于显示结果的区域。 ```html <div class="button" id="btn1"><a href="#">HelloWorld</a></div> <div class="button" id="btn2"><a href="#">传入参数</a></div> <div class="button" id="btn3"><a href="#">返回集合</a></div> <div class="button" id="btn4"><a href="#">返回复合类型</a></div> <div class="button" id="btn5"><a href="#">返回DataSet(XML)</a></div> <div id="loading">服务器处理中，请稍后</div> <div id="dictionary"></div> ``` 接下来，我们转向WebService的实现。在.CS文件中，定义了一个名为`WebService`的类，它继承自`System.Web.Services.WebService`。为了使WebService能够被jQuery调用，我们需要添加`[System.Web.Script.Services.ScriptService]`特性。 ```csharp [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService() { // InitializeComponent(); } [WebMethod] public string HelloWorld() { return "HelloWorld"; } [WebMethod] public string GetWish(string value1, string value2, string value3, int value4) { return string.Format("祝您在{3}年里{0}、{1}、{2}", value1, value2, value3, value4); } // 更多其他WebMethod... } ``` 在上述代码中，我们定义了两个WebMethod：`HelloWorld`和`GetWish`。`HelloWorld`方法是无参数的，直接返回字符串"HelloWorld"。而`GetWish`方法接收四个参数，返回一个格式化的祝福语。 现在，我们将介绍如何使用jQuery调用这些方法。我们需要使用jQuery的`$.ajax`或`$.post`函数。例如，当用户点击"HelloWorld"按钮时，可以这样调用： ```javascript $("#btn1").click(function () { $("#loading").show(); $.ajax({ type: "POST", url: "WebService.asmx/HelloWorld", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { $("#dictionary").html(response.d); $("#loading").hide(); }, error: function (xhr, status, error) { alert("请求失败：" + error); $("#loading").hide(); } }); }); ``` 类似地，对于带有参数的方法，如`GetWish`，我们可以这样做： ```javascript $("#btn2").click(function () { var value1 = "健康"; var value2 = "快乐"; var value3 = "成功"; var value4 = new Date().getFullYear(); $("#loading").show(); $.ajax({ type: "POST", url: "WebService.asmx/GetWish", data: JSON.stringify({ value1: value1, value2: value2, value3: value3, value4: value4 }), contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { $("#dictionary").html(response.d); $("#loading").hide(); }, error: function (xhr, status, error) { alert("请求失败：" + error); $("#loading").hide(); } }); }); ``` 对于返回集合、返回复合类型和返回DataSet（XML）的调用，你需要确保在WebService中定义了相应的WebMethod，并在JavaScript中正确处理返回的数据。例如，如果`GetCollection`方法返回一个数组，你可以使用`response.d`作为JSON对象进行遍历。如果是DataSet，通常需要解析返回的XML数据。 jQuery调用ASP.NET的WebService涉及到的主要知识点有： 1. jQuery的`.ajax`和`.post`方法用于异步调用Web服务。 2. `contentType`属性设置为`"application/json; charset=utf-8"`，以发送JSON格式的数据。 3. `dataType`属性设置为`"json"`，表示期望接收JSON格式的响应。 4. WebService中的`[WebMethod]`特性标记可从客户端调用的方法。 5. 使用`$.ajax`的`success`回调处理成功的响应，`error`回调处理失败的情况。 6. 对于参数传递，使用`JSON.stringify`将对象转换为JSON字符串。 7. ASP.NET WebService返回的数据通常包含在`d`属性中，因此在JavaScript中访问`response.d`获取实际数据。 通过以上步骤，你可以创建一个交互式的页面，通过jQuery调用ASP.NET的WebService，处理各种数据类型和场景。