$.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已然是數組元素，無需再做轉換