在給公司的項(xiàng)目做客服系統(tǒng)的時(shí)候,客服系統(tǒng)實(shí)現(xiàn)用的是node蜂林,因?yàn)槭裁从脩粜畔⑦@些決定從原本的項(xiàng)目拿噪叙,沒有使用nginx這些睁蕾,所以需要跨域拿用戶信息子眶,于是使用jsonp臭杰。先上js代碼:
$.getJSON("localhost:8080/getStaff4kefu.html?jsoncallback=?",{id:id},function (data) {
if(data.result=="success"){
username = data.username;//拿到用戶名
}
})
就這樣一條簡單的異步請求,但是后臺(tái)的返回讓我踩了不少坑
1.
一開始我是直接使用字符串返回的
@RequestMapping(value = "/getStaff4kefu")
@ResponseBody
public String getStaff4kefu(String id, String jsoncallback){
Staff staff = staffService.find(id);
String result = "{'result':'success','username' ' "+ staff.getUsername()+" '}";
return jsoncallback+"("+result+");";//這里分號是必須加的
}
可是這樣返回到前端之后只能拿到一個(gè)帶jsoncallback的字符串
"jQuery21408821042269719217_1498899684623({result: "success", id: "8ad0ecb75cfcc505015cfcdb1ad30002"})"
在前端的error方法里輸出錯(cuò)誤是parseerror,因?yàn)榉祷氐恼麄€(gè)都是字符串當(dāng)然是錯(cuò)誤的
2
后來發(fā)現(xiàn)jackson包里有一個(gè)叫JSONPObject的類脉顿,可以直接對應(yīng)jsonp的請求艾疟,于是代碼又改成
@RequestMapping(value = "/getStaff4kefu")
@ResponseBody
public JSONPObject getStaff4kefu(String id, String jsoncallback){
Staff staff = staffService.find(id);
String result = "{'result':'success','username' ' "+ staff.getUsername()+" '}";
return new JSONPObject(jsoncallback,result);
}
這次前端不報(bào)pareserror蔽莱,但是這次拿出來的還是字符串:
{result: "success", id: "8ad0ecb75cfcc505015cfcdb1ad30002"}
還是不能用,無法在前端轉(zhuǎn)成json
3
最后發(fā)現(xiàn)既然前端不轉(zhuǎn),那么我后臺(tái)直接給他轉(zhuǎn)就好了仪糖,于是有了現(xiàn)在的代碼
@RequestMapping(value = "/getStaff4kefu")
@ResponseBody
public JSONPObject getStaff4kefu(String id, String jsoncallback){
Staff staff = staffService.find(id);
JSONObject obj = new JSONObject();
obj.put("result":"success");
obj.put("username",staff.getUsername());
return new JSONPObject(jsoncallback,obj);
}
這樣锅劝。在前端就正確地拿到了這個(gè)username故爵,直接輸出data就是object類型
總結(jié)
一開始我感覺是我的json字符串有問題诬垂,可是后來校驗(yàn)了一下并沒有問題剥纷,這個(gè)解決方案其實(shí)只是一個(gè)規(guī)避方法晦鞋,所以暫時(shí)還需要再去深入了解悠垛!