JSON进阶五-JS和WCF的交互
在园子里看到很多关于AJAX FOR WCF的文章,大多数采用EXT和WCF交互。
但老实说EXT这个东西比较适合应用开发,对于我这种的网站程序员,EXT比较大。
其中涉及到许多知识点,在这里和大家分享下。
至于如何使用AJAX FOR WCF我这里就不说了,园子里有很多类似的文章:
首先,我说一下如何写一个JSON传递形式调用AJAX FOR WCF服务(我这里使用JQuery的ajax为例):
$.ajax({
type: 'post',
url: '/TdxGridExample/Wcf/Service.svc/Add', //WCF的URL,/Add是指定该WCF的Add方法
contentType: 'text/json',
data: ’{"x":1,"y":2}‘,
success: function(msg) {
alert(msg);
}
});
type: 'post',
url: '/TdxGridExample/Wcf/Service.svc/Add', //WCF的URL,/Add是指定该WCF的Add方法
contentType: 'text/json',
data: ’{"x":1,"y":2}‘,
success: function(msg) {
alert(msg);
}
});
注:contentType:类型必须设置为text/json,而不是'text/xml' 或 'text/html'
data,必须是json形式字符串:并且要对应后台WCF参数名:
WCF代码:
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Add", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public int Add(int x, int y) {
return x + y;
}
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Add", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public int Add(int x, int y) {
return x + y;
}
{"x":1,"y":2} 中的x对应Add方法中的第一个参数,而y则对应第二个参数:
例2,关于WCF对象类型参数:
js代码:
function Speak() {
var pople = { p: { name: '张三', sex: 1, birth: JSON2.strToDate('2000-11-11','yyyy-MM-dd')} };
$.ajax({
type: 'post',
url: '/TdxGridExample/Wcf/Service.svc/Speak',
contentType: 'text/json',
data: JSON2.stringify(pople),
success: function(msg) {
alert(msg);
}
});
}
var pople = { p: { name: '张三', sex: 1, birth: JSON2.strToDate('2000-11-11','yyyy-MM-dd')} };
$.ajax({
type: 'post',
url: '/TdxGridExample/Wcf/Service.svc/Speak',
contentType: 'text/json',
data: JSON2.stringify(pople),
success: function(msg) {
alert(msg);
}
});
}
注: wcf的日期类型必须是UTC日期形式的字符串类型, 我在JSON2.js 里扩展了
JSON2.dateFormat('UTC日期格式的字符串,例如:/Date(1304179200000+0800)/','日期格式,例如:yyyy-MM-dd');
JSON2.strToDate('2009-11-11','yyyy-MM-dd');
互相转换的方法。
{ p: { name: '张三', sex: 1, birth: JSON2.strToDate('2000-11-11','yyyy-MM-dd')} }
p 代表下例WCF的Speak方法中参数,
而name,sex,birth 对应People类中的属性,大小写必须相符。
wcf代码:
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Add", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public int Add(int x, int y)
{
return x + y;
}
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Speak", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public string Speak(People p)
{
string sexCN = p.sex == 1 ? "男" : "女";
return "我叫" + p.name + "," + sexCN + "性,出生于" + p.birth.ToString("yyyy-MM-dd");
}
}
[DataContract]
public class People {
[DataMember]
public string name;
[DataMember]
public byte sex;
[DataMember]
public DateTime birth;
}
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Add", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public int Add(int x, int y)
{
return x + y;
}
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Speak", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public string Speak(People p)
{
string sexCN = p.sex == 1 ? "男" : "女";
return "我叫" + p.name + "," + sexCN + "性,出生于" + p.birth.ToString("yyyy-MM-dd");
}
}
[DataContract]
public class People {
[DataMember]
public string name;
[DataMember]
public byte sex;
[DataMember]
public DateTime birth;
}
注:People必须添加序列化标记
示例代码