jQuery 调用WebService 实例讲解

1.首先建一个WebService程序

/// <summary>/// WebService1 的摘要说明/// </summary>[WebService（Namespace = "http://tempuri.org/"）][WebServiceBinding（ConformsTo = WsiProfiles.BasicProfile1_1）][ToolboxItem（false）]// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。[System.Web.Script.Services.ScriptService]public class WebService1 : System.Web.Services.WebService{ [WebMethod] public string HelloWorld（） {CommonData.Json.ObjectSerialization ser = new CommonData.Json.ObjectSerialization（）;Student stu = new Student（）;stu.Id = 1;stu.Name = "hechen";string json = ser.EntityToJson（stu）;return json; }}

[System.Web.Script.Services.ScriptService] 这里得注意，默认情况下这个特性是注释起来的，如果想用Javascript来调用WebService 就要取消这个注释
WebService 的内容不必多说，用Jquery调用WebService 返回肯定是一个xml。而xml是说明文件，而不是具体方法返回的值，所以我们做适当的处理。我们这里WebService方法返回的是JSON数据，以便在前台解析。下载是实体类序列化JSON的代码。
2. 实体对象序列化JSON

/** ** 2009-5-26 * 贺臣 ** 将某个对象转化为Json数据格式 * */using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.IO;using System.Data;using System.ServiceModel.Web;using System.Runtime.Serialization;using System.Runtime.Serialization.Json;namespace CommonData.Json{ public class ObjectSerialization {private object _entity;/// <summary>/// 被序列化得实体对象/// </summary>public object Entity{ get { return _entity; } set { _entity = value; }}private string _jsonData;/// <summary>/// 被转化为json格式数据的对象/// </summary>public string JsonData{ get { return _jsonData; } set { _jsonData = value; }}/// <summary>/// 无参数构造方法/// </summary>public ObjectSerialization（）{ }/// <summary>/// 有参数构造方法/// </summary>/// <param name="entity">要被序列化得实体对象</param>public ObjectSerialization（object entity）{ this._entity = entity;}/// <summary>/// 序列化实体对象/// </summary>/// <returns></returns>public string EntityToJson（）{ var serializer = new DataContractJsonSerializer（Entity.GetType（））; MemoryStream ms = new MemoryStream（）; serializer.WriteObject（ms, Entity）; byte[] myByte = new byte[ms.Length]; ms.Position = 0; ms.Read（myByte, 0, （int）ms.Length）; string dataString = Encoding.UTF8.GetString（myByte）; return dataString;}/// <summary>/// 序列化实体对象/// </summary>/// <param name="entity">要被序列化得实体对象</param>/// <returns></returns>public string EntityToJson（object entity）{ this._entity = entity; return EntityToJson（）;}/// <summary>/// 将Json格式数据转换为对象/// </summary>/// <returns></returns>public T GetObjectJson<T>（）{ MemoryStream ms = new MemoryStream（Encoding.UTF8.GetBytes（JsonData））; var serializer = new DataContractJsonSerializer（typeof（T））; T t = （T）serializer.ReadObject（ms）; return t;}/// <summary>/// 将Json格式数据转换为对象/// </summary>/// <param name="jsonData">json数据格式</param>/// <returns></returns>public T GetObjectJson<T>（string jsonData）{ this._jsonData = jsonData; return GetObjectJson<T>（）;} }}

注意序列化实体必须用可序列化特性修饰，如Serialiable，否则它不能序列化为JSON数据字符串
3.前台程序Jquery调用

<script src="jquery-1[1].2.3.min.js" type="text/javascript"></script><script src="json2.js" type="text/javascript"></script><script type="text/javascript"> $（document）.ready（function（） { $（"#btnClick"）.click（function（） { $.ajax（{url:"http://localhost:10168/WebService1.asmx/HelloWorld",beforeSend: function（x） {          x.setRequestHeader（"Content-Type", "application/json; charset=utf-8"）;        },data:{},dataType:"json",type:"POST",error: function（x, e） {         alert（x.responseText）;       },        complete: function（x） {          //alert（x.responseText）;       } ,success:function（data）{ var msg=data.d; var json=JSON2.parse（msg）; alert（json.id）;} }）; }）; }）;</script>

这里进入了Jquery的核心文件和一个JSON2.js文件
url:"http://localhost:10168/WebService1.asmx/HelloWorld" 这个是调用WebService方法的路径，HelloWorld 是WebService 中的方法。
同时还要设置WebService请求后返回的参数格式（json），data是用于解释返回的值。这里值得注意的是data是一个json格式的字符串，而且对象名为d，所以我们用到了后面的var msg=data.d;
如果我们要能够像JSON那个以 . 操作来访问键值，我们就使用到了 JSON2.js 中的方法将 json字符串转化为json对象，这样就可以以. 操作来访问对象了。
如果我们需要调用带参数的WebService ，则我们可以再data 中指定传递的参数，参数名要和WebService中方法参数名相同。
在这里应该说是没有问题，我在写这个例子的时候，并不是这么顺利，后来查了很多关于WebService的资料，原来我们要修改WebService中Web.config 的配置，否则我们不能以Url 那种格式访问WebService。
配置如下：
在System.web 这个节点中添加如下配置即可

<webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols></webServices>

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持脚本之家。