1. 程式人生 > >ajax獲取伺服器靜態資源(一個.json檔案),請求成功,有檔案返回,但是ajax回撥卻進了error(一個回車鍵惹出的禍)

ajax獲取伺服器靜態資源(一個.json檔案),請求成功,有檔案返回,但是ajax回撥卻進了error(一個回車鍵惹出的禍)

問題描述:同事反應問題:向後臺請求json檔案,完了在前臺渲染一個表格,但是始終渲染不出來。

 $.ajax({
                    url: ".../**.json",
                    type: "get",
                    dataType: "json",
                    success: function(data) {
                        alert(data);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);//textStatus:返回的是字串型別,表示返回的狀態,根據伺服器不同的錯誤可能返回下面這些資訊:"timeout"(超時), "error"(錯誤), "abort"(中止), "parsererror"(解析錯誤),還有可能返回空值。
                    },
                    complete: function(XMLHttpRequest, textStatus) {
                        this; // 呼叫本次AJAX請求時傳遞的options引數
                    }
                });

解決過程:1、斷點除錯,看看程式執行到哪裡出的問題,看到執行到 $.ajax({直接跳出去了,發現ajax未寫error方法;

                  2、要求其加上error方法後,發現出現:parsererror;

                  3、搜尋這個錯誤,總結下有很多原因會造成這個錯誤:

                      跨域、dataType要求的資料型別和返回的不一致、data不能傳空字串(未驗證)、Header 型別(未驗證)等;

                  4、基於同事說過之前是可以的,現在不行了,我想到可能是json檔案出了問題,於是觀察了一下他怎麼操作的:

                       為了方便看資料,他把陣列元素只剩下一個元素,其餘都給註釋掉了:

        註釋後:

看到這裡,問題也就出來了:

他為了把中間這個逗號註釋掉,按了一下回車,然後註釋的。json裡面多了一個回車符,導致前臺解析出現錯誤!

去掉回車符後,果然就可以了。

這裡總結下,json格式要求,這裡有個重要知識點:jQuery1.4及以上版本不是用eval生成物件了,用的JSON.parse,如果返回格式不標準就會報錯;

像空格、回車符、tab鍵這種,極難發現問題,卻又影響很大,只能說,大家平時要養成一個良好的程式設計習慣。