解決Ajax請求出現Uncaught SyntaxError: Unexpected token : 錯誤__Ajax

轉載自：http://blog.csdn.net/wqmain/article/details/8905287 一：問題引入

外掛程式介紹：眾所周知，使用ajax直接發起請求存在跨域無許可權訪問的問題，這時候，需要使用jsonp協議（非官方的協議）處理，jQuery中的$.ajax方法也直接支援使用該協議進行跨域訪問。下面首先介紹使用jQuery的$.ajax方法進行跨域訪問，然後再介紹使用其它jQuery外掛程式（jQuery-JSONP）實現樣的功能。

1、建立一個jsp頁面，加入一段js代碼內容如下：

[javascript] view plaincopyprint? <script type="text/javascript">     function ajaxtest() {     $.ajax({        url:'http://192.168.10.111/demo/testjson',        data:{rel:13},        dataType:"jsonp",        jsonp:"callback",        jsonpCallback:"success_jsonp",        timeout:3000,        dataFilter:function(json){            console.log("jsonp.filter:"+json);            return json;        },        success:function(json,textStatus){            console.log("jsonp.success:"+json.name);        },        error:function(XMLHttpRequest,textStatus,errorThrown){            console.log("jsonp.error:"+textStatus);        }     });     }     </script>   

再添加一個按鈕用來測試該js方法，如下：

[html] view plaincopyprint? <input type="button" value="ajaxtest" onclick="ajaxtest()"/>   說明：當點擊 ajaxtest 按鈕時，就會發起一個請求，由url、dataType、jsonp等參數可知，ajax使用jsonp協議向 http://192.168.10.111/demo/testjson 這個地址發起請求，並自動在url後追加callback參數，實際請求的url地址應為：http://192.168.10.111/demo/testjson?rel=13&callback=success_jsonp，請求逾時時間為3秒，接收的資料為json格式字串。如果成功接收到遠程方法返回的json資料並且格式正確的話，首先會進入dataFilter方法（你可以在這個方法內對返回的json資料進行預先處理，比如過濾、更改json資料等），然後進入success方法；如果請求失敗或者返回的json資料格式不正確的話會直接進入error方法。

那麼服務端的testjson方法應該返回什麼樣的資料呢。直接返回json對象或json字串是不對的。還需要在之前加上請求時傳過來的callback的參數值，後台（以servlet為例）應類似如下處理：

[java] view plaincopyprint? public void testjson(HttpServletRequest request, HttpServletResponse response) {       String callback = (String)request.getParameter("callback");       String jsonData = "{\"id\":\"3\", \"name\":"zhangsan", \"telephone\":"13612345678"}";//為了示範效果，json資料是寫死的       String retStr = callback + "(" + jsonData + ")";  //解決問題方法     response.getWriter().print(retStr);   }  

這樣後台響應的的資料實際為：success_jsonp({"id":"3", "name":"zhangsan", "telephone":"13612345678"})    其中success_jsonp取決於ajax參數值的設定，如果未設定，jQuery將會自動產生一個名字作為callback的參數值。總之，後台只需request接收parameter後，動態拼接callback變數的值就可以了。

如果返回的資料格式不按上述講的這樣，請求就會失敗並直接進入ajax的error方法。像 Uncaught SyntaxError: Unexpected token : 類似這種錯誤就是返回的json資料沒用“(”和“)”小括弧包起來或者前面沒加callback值而引起的。

二：使用其他外掛程式

跨域調用功能除了用Query的$.ajax方法可以實現外，網路上還有其它眾多的jQuery外掛程式可以完成，下面就來看一下使用jQuery的jsonp外掛程式來進行跨域調用：

首先在之前建立的jsp頁面中引入jQuery-JSONP外掛程式並加入jsonptest測試方法，下載地址：https://github.com/jaubourg/jquery-jsonp

[javascript] view plaincopyprint? <script type="text/javascript" sr