代码改变世界

jQuery调用WCF

2009-12-05 12:10  coodoing  阅读(1722)  评论(4编辑  收藏  举报

首先建一个Ajax-WCF服务:,web-config自动配置就没管;
  然后,在apsx文件中写js代码:

<script type="text/javascript" language="javascript">

$(
function() {
$(
'#Nick').bind('blur', function() { // BLUR为失去焦点时候触发事件
if ($('#Nick').val() =='') {
alert(
"用户名不能为空.");
}
else {
$.ajax({
type:
'POST',
url:
'<%= MixApplication.Instance.RelativePath %>/Service/RegisterUserService.svc/IsUserExist',
//dataType: 'json', 不要,有的话就会报500,server internal错误
contentType: "application/json",
data:
'{"nickName":"'+ $('#Nick').val() +'"}',
complete:
function(xmlHttpRequest) {
//alert('完整的服务器响应已经收到');
},
success:
function(data) {
//var a = eval('(' + data + ')'); //将JSON文本转换为对象
//alert(a.d);
var da = JSON.parse(data).d; // java的反序列化
//alert('data的值是:' + da);
if (da ==true) {
$(
'#nickTip').html('用户名不存在,可以注册');

}
else {
$(
'#nickTip').css('color', 'red');
$(
'#nickTip').html('用户名已存在,请另外输入用户名');
}
}
});
}
})
$(
'#Nick').bind('focus', function() {
$(
'#nickTip').css('color', '');
$(
'#nickTip').html('');
})
})

</script>

来判断html控件中名字Nick是否已经存在,相应的html为:

Html代码
  1. <tr>  
  2.                         <td>   
  3.                             用户昵称:   
  4.                         </td>   
  5.                         <td>   
  6.                             <input name="NickText" id="Nick" type="text" class="long-input" style="width: 120px" />   
  7.                         </td>   
  8.                         <td>   
  9.                             <div id="NickTip" style="width: 270px">   
  10.                             </div>   
  11.                             <p id="nickTip">   
  12.                             </p>   
  13.                             <!--<div id="msg" style="display: none" visible="false">   
  14.                             </div>-->   
  15.                         </td>  
  16.                     </tr>  

而相应的WCF服务代码为:

C#代码
  1. [OperationContract]   
  2.   [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]   
  3.   public bool IsUserExist(string nickName)   
  4.   {   
  5.       bool result = false;   
  6.       if (UserService.IsUserExsits(nickName)==true//表示用户不存在   
  7.       {   
  8.           result = true;   
  9.       }   
  10.       return result;   
  11.   }  
      

 下面错误就出现了:

    默认建立WCF服务,并没有 [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]这句。后面是在网上看到的,就添加了上去,是为了客户端与服务器端交互的数据都是json;

   然后,用jquery调用$.ajax({})服务时候,参照相应参数:datatype:'json',使服务器返回的参数类型是json,但这样的话,同FF调试的时候,HTTP服务器响应的状态值始终是500,intenal server error;

  后来网上查了一下,不知道所以,就把datatype:'json'这句注释了,改用contentType: "application/json", 后面就调试成功:在将返回数据反序列话后,就正确提示用户名是否存在的信息。

   问题就是:其中contentType: "application/json", 的contentType却不是$.ajax({})中的属性,而且我觉得这句话的contentType: "application/json", 含义就是:与[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)] 对应,使得客户端与服务器端交互的数据都是json;但实际上我一开始用datatype:'json'时候传的数据以及服务器返回的数据都是json:

Js代码
  1. dataType: 'json',      
  2. data: '{"nickName":"' + $('#Nick').val() + '"}',  
 

调试成功的用法:

Js代码
  1. contentType: "application/json",   
  2. data: '{"nickName":"' + $('#Nick').val() + '"}',  
 

  所以就不太清楚,这两种写法的具体实现由何区别??实现机制难道不一样》??