ajax+jsonp+java實(shí)現(xiàn)跨域的小經(jīng)歷

在給公司的項(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í)還需要再去深入了解悠垛!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子搀缠,更是在濱河造成了極大的恐慌艺普,老刑警劉巖歧譬,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異缩焦,居然都是意外死亡舌界,警方通過查閱死者的電腦和手機(jī)呻拌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進(jìn)店門靴拱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來袜炕,“玉大人偎窘,你說我怎么就攤上這事陌知∑推希” “怎么了沿盅?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長南窗。 經(jīng)常有香客問我,道長郎楼,這世上最難降的妖魔是什么万伤? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮呜袁,結(jié)果婚禮上敌买,老公的妹妹穿的比我還像新娘。我一直安慰自己阶界,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布膘融。 她就那樣靜靜地躺著芙粱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪氧映。 梳的紋絲不亂的頭發(fā)上春畔,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼律姨。 笑死振峻,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的择份。 我是一名探鬼主播扣孟,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼荣赶!你這毒婦竟也來了凤价?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤讯壶,失蹤者是張志新(化名)和其女友劉穎料仗,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伏蚊,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年格粪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了躏吊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,096評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡帐萎,死狀恐怖比伏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情疆导,我是刑警寧澤赁项,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站澈段,受9級特大地震影響悠菜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜败富,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一悔醋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧兽叮,春花似錦芬骄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至泽本,卻和暖如春淘太,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工琴儿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留段化,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓造成,卻偏偏與公主長得像显熏,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子晒屎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容