首先建一个Ajax-WCF服务,[img][/img]图片见附件:,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为:
<tr> <td> 用户昵称: </td> <td> <input name="NickText" id="Nick" type="text" class="long-input" style="width: 120px" /> </td> <td> <div id="NickTip" style="width: 270px"> </div> <p id="nickTip"> </p> <!--<div id="msg" style="display: none" visible="false"> </div>--> </td> </tr>
而相应的WCF服务代码为:
[OperationContract] [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)] public bool IsUserExist(string nickName) { bool result = false; if (UserService.IsUserExsits(nickName)==true) //表示用户不存在 { result = true; } return result; }
下面错误就出现了:
默认建立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:
dataType: 'json', data: '{"nickName":"' + $('#Nick').val() + '"}',
调试成功的用法:
contentType: "application/json", data: '{"nickName":"' + $('#Nick').val() + '"}',
这两种写法的具体实现由何区别??实现机制难道不一样》?
解析:
$.ajax({})中的data属性:数据在web上传递的时候,由于是对象必须是key/value形式,json格式自动转换格式为:
{"fata1":"aa","data2":"bb"}转换为:&data1=aa&data2=bb,而contentType: "application/json"的具体含义就是始终是json。