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>
上一篇：基于jQuery实现放大镜效果
栏 目：jquery
下一篇：jQuery AnythingSlider滑动效果插件
本文地址：http://www.codeinn.net/misctech/175330.html
