以前都是 web 程序调用 WebService,.net 把 WebService 封装的太简单了,所以之前都是很肤浅的用,都没有想过更深层的东西,并且只是停留在表面的添加引用和调用。
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
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>
来源: http://www.phperz.com/article/17/0303/264550.html