jQuery调用WCF服务

 首先建一个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。

评论

1 楼 abc7797005 2011-11-22  

如果要调用的客户端页面和wcf服务，不是放在同一个网站，而是放在不同的网站上，那要怎么调用？配置文件要怎么写呢