$.ajax中的dataType参数与success回调函数

$.ajax中的dataType参数与success回调函数

本例实现的是一个联系人搜索，前端提交搜索信息，后端进行匹配，存在则以JSON格式返回联系人信息，否则返回空。

前端js代码如下

<script type="text/javascript">
        function showWorkerTable(data)
        {
            if(data == "")
                    {
                      alert("不存在该员工！");
                    }
                    else
                    {
                        data = eval('(' + data + ')');
                        var x = 0;

                        dataHandle(data);   //具体的操作函数，自定义
                    }
        }

        //点击Search按钮，查找联系人
        $("#SearchButton").click(function(){
        $.ajax({
            url : "php/workerSearch.php?SearchText="+$("#SearchText").val(),
            type : "GET",
            cache : false,
            dataType : 'json',
            success : showWorkerTable
        })
        })

相比于传统的创建XMLHttpRequest对象的方法，使用JQuery的$.ajax可以极大的简化ajax编程。但是在转换的过中也出现了一些值得注意小问题：
1. 当输入已存在的联系人（即data不为空）时，eval()函数报错

Uncaught SyntaxError: Unexpected identifier

2.当输入不存在的联系人（即data为空）时，success回调函数——function showWorkerTable(data) 没有执行。
服务器端代码如下

if($rs)
        {
            $data = array(
                "name" => $rs["name"],
                "number" => $rs["number"],
                "tele" => $rs["tele"],
                "sex" => $rs["sex"],
                "email" => $rs["email"],
                "date" => $rs["date"],
                "department" => $rs["department"],
                "position" => $rs["position"]
                );  
            $json_data = json_encode($data);
            echo $json_data;
        }
        else
        {
            $data = "";
            echo $data;
        }

问题出在了$.ajax中dataTyp参数的认识不够。

$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。

通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定
html、json、jsonp、script或者text。其中，text和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，注意，我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明
text/xml 或者 application/xml
来获得一致的结果。如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。如果浏览器不支持，则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=?这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

注意，JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅
最初的文章。如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。

---

回到本例中来，当dataType已经声明为“json”时，就是告诉服务器“要回就给给我回json格式的，不然老子不要！”，而且接受到数据后将自动转换成JavaScript对象。
所以，上面问题的解决方法是：
1. 将返回的空字符串也经过json_encode函数，转换为json格式后再发送
2. 将eval函数代码舍去，data已然是数组元素，无需再做转换