jQuery 调用WebService 实例讲解
1.首先建一个WebService程序
///<summary>
///WebService1的摘要说明
///</summary>
[WebService(Namespace="http://tempuri.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
//若要允许使用ASP.NETAJAX从脚本中调用此Web服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
publicclassWebService1:System.Web.Services.WebService
{
[WebMethod]
publicstringHelloWorld()
{
CommonData.Json.ObjectSerializationser=newCommonData.Json.ObjectSerialization();
Studentstu=newStudent();
stu.Id=1;
stu.Name="hechen";
stringjson=ser.EntityToJson(stu);
returnjson;
}
}
[System.Web.Script.Services.ScriptService]这里得注意,默认情况下这个特性是注释起来的,如果想用Javascript来调用WebService就要取消这个注释
WebService的内容不必多说,用Jquery调用WebService返回肯定是一个xml。而xml是说明文件,而不是具体方法返回的值,所以我们做适当的处理。我们这里WebService方法返回的是JSON数据,以便在前台解析。下载是实体类序列化JSON的代码。
2.实体对象序列化JSON
/**
*
*2009-5-26
*贺臣
*
*将某个对象转化为Json数据格式
**/
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.IO;
usingSystem.Data;
usingSystem.ServiceModel.Web;
usingSystem.Runtime.Serialization;
usingSystem.Runtime.Serialization.Json;
namespaceCommonData.Json
{
publicclassObjectSerialization
{
privateobject_entity;
///<summary>
///被序列化得实体对象
///</summary>
publicobjectEntity
{
get{return_entity;}
set{_entity=value;}
}
privatestring_jsonData;
///<summary>
///被转化为json格式数据的对象
///</summary>
publicstringJsonData
{
get{return_jsonData;}
set{_jsonData=value;}
}
///<summary>
///无参数构造方法
///</summary>
publicObjectSerialization()
{
}
///<summary>
///有参数构造方法
///</summary>
///<paramname="entity">要被序列化得实体对象</param>
publicObjectSerialization(objectentity)
{
this._entity=entity;
}
///<summary>
///序列化实体对象
///</summary>
///<returns></returns>
publicstringEntityToJson()
{
varserializer=newDataContractJsonSerializer(Entity.GetType());
MemoryStreamms=newMemoryStream();
serializer.WriteObject(ms,Entity);
byte[]myByte=newbyte[ms.Length];
ms.Position=0;
ms.Read(myByte,0,(int)ms.Length);
stringdataString=Encoding.UTF8.GetString(myByte);
returndataString;
}
///<summary>
///序列化实体对象
///</summary>
///<paramname="entity">要被序列化得实体对象</param>
///<returns></returns>
publicstringEntityToJson(objectentity)
{
this._entity=entity;
returnEntityToJson();
}
///<summary>
///将Json格式数据转换为对象
///</summary>
///<returns></returns>
publicTGetObjectJson<T>()
{
MemoryStreamms=newMemoryStream(Encoding.UTF8.GetBytes(JsonData));
varserializer=newDataContractJsonSerializer(typeof(T));
Tt=(T)serializer.ReadObject(ms);
returnt;
}
///<summary>
///将Json格式数据转换为对象
///</summary>
///<paramname="jsonData">json数据格式</param>
///<returns></returns>
publicTGetObjectJson<T>(stringjsonData)
{
this._jsonData=jsonData;
returnGetObjectJson<T>();
}
}
}
注意序列化实体必须用可序列化特性修饰,如Serialiable,否则它不能序列化为JSON数据字符串
3.前台程序Jquery调用
<scriptsrc="jquery-1[1].2.3.min.js"type="text/javascript"></script>
<scriptsrc="json2.js"type="text/javascript"></script>
<scripttype="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){
varmsg=data.d;
varjson=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,所以我们用到了后面的varmsg=data.d;
如果我们要能够像JSON那个以 .操作来访问键值,我们就使用到了JSON2.js中的方法将json字符串转化为json对象,这样就可以以.操作来访问对象了。
如果我们需要调用带参数的WebService,则我们可以再data中指定传递的参数,参数名要和WebService中方法参数名相同。
在这里应该说是没有问题,我在写这个例子的时候,并不是这么顺利,后来查了很多关于WebService的资料,原来我们要修改WebService中Web.config的配置,否则我们不能以Url那种格式访问WebService。
配置如下:
在System.web这个节点中添加如下配置即可
<webServices> <protocols> <addname="HttpGet"/> <addname="HttpPost"/> </protocols> </webServices>
以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持毛票票。