ç± äºæ¤åå¾å°åå端ç代ç (ååï¼ä¸åæ ¼çç¨åºåå)ï¼æè¿é¡¹ç®ä¸ç¨å°jsonä½ä¸ºç³»ç»é´äº¤äºçæ段ï¼èªç¶å°±ä¼´éçä¼å¤ajax请æ±ï¼éä¹èæ¥çå°±æ¯è¦è§£å³ ajaxçè·¨åé®é¢ãæ¬ç¯å°è®²è¿°ä¸ä¸ªå°ç½ä»éå°è·¨åä¸ç¥éæ¯è·¨åé®é¢ï¼å°ç¥éæ¯è·¨åé®é¢ä¸ç¥éå¦ä½è§£å³ï¼åå°è§£å³è·¨åé®é¢ï¼æåæ¾å°ä¸¤ç§æ¹æ³è§£å³ajax è·¨åé®é¢çå
¨è¿ç¨ã
ä¸ç¥æ¯è·¨åé®é¢
èµ· å æ¯è¿æ ·çï¼ä¸ºäºå¤ç¨ï¼åå°éå¤å¼åï¼åç¬å¼åäºä¸ä¸ªç¨æ·æé管çç³»ç»ï¼å
±å
¶ä»ç³»ç»è·å认è¯ä¸ææä¿¡æ¯ï¼æä¸ç§°ä¹ä¸ºAç³»ç»ï¼è°ç¨Aç³»ç»ä»¥B为ä¾ãå¨Bç³»ç» ä¸ç¨ajaxè°ç¨Aç³»ç»ç³»ç»çæ¥å£(æ°æ®æ ¼å¼ä¸ºjson)ï¼å½æ¶ç¹å«å°æï¼å¨Aç³»ç»ä¸è®¿é®ç¸åºçurlå¯æ£å¸¸åè¿jsonæ°æ®ï¼ä½æ¯å¨Bç³»ç»ä¸ä½¿ç¨ ajax请æ±åæ ·çurlåä¸ç¹å¿ååºé½æ²¡æï¼å¥½åä»ä¹é½æ²¡æåçä¸æ ·ãè¿æ ·ååå¤å¤æ¹æ¥æ¹å»å¥½ä¹
é½æ²¡è½è§£å³ï¼äºæ¯æ±æåäºï¼æéå¯è½æ¯ajaxè·¨åé® é¢ï¼äºæ¯å°±å°è¿ä¸ªé®é¢å½åè·¨åé®é¢æ¥è§£å³äºã
ç¥è·¨åèä¸ç¥å¦ä½è§£å³
ç¥éé®é¢çç¡®ååå ï¼å©ä¸çå°±æ¯æ¾å°è§£å³é®é¢çæ¹æ³äºãgoogleäºå¥½ä¹
ï¼å次å¨åäºçæç¹ä¸ç¥éjQueryçajaxæjsonpè¿æ ·çå±æ§å¯ä»¥ç¨æ¥è§£å³è·¨åçé®é¢ã
æ¾å°ä¸ç§è§£å³æ¹å¼
ç°å¨ä¹ç¥éäºææ ·æ¥è§£å³è·¨åé®é¢ï¼ä½ä¸çå°±æ¯å®ç°çç»èäºãå®ç°çè¿ç¨ä¸é误è¿æ¯é¿å
ä¸äºçãç±äºä¸äºè§£jsonåjsonp两ç§æ ¼å¼çåºå«ï¼ä¹ç¯äºé误ï¼googleäºå¥½ä¹
æ解å³ã
é¦å
æ¥ççå¨é¡µé¢ä¸å¦ä½ä½¿ç¨jQueryçajax解å³è·¨åé®é¢çç®åçï¼
å¤å¶ä»£ç
$(document).ready(function(){
var url='
http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?';
$.ajax({
url:url,
dataType:'jsonp',
processData: false,
type:'get',
success:function(data){
alert(data.name);
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}});
});
å¤å¶ä»£ç
è¿æ ·åæ¯å®å
¨æ²¡æé®é¢çï¼èµ·å
errorçå¤çå½æ°ä¸ä»
ä»
æ¯alert(âerrorâ)ï¼ä¸ºäºè¿ä¸æ¥å¼æ¸
æ¥æ¯ä»ä¹åå é æäºé误ï¼æ
å°å¤çå½æ°å 为ä¸é¢çå®ç°æ¹å¼ãæåä¸è¡alert使ç¨ä¸ºï¼parsererrorãç¾æä¸å¾å
¶è§£ï¼ç»§ç»googleï¼æç»è¿æ¯å¨ä¸è½çstackoverflowæ¾ å°äºçæ¡ï¼é¾æ¥å¨è¿éãåå æ¯jsonpçæ ¼å¼ä¸jsonæ ¼å¼æçç»å¾®çå·®å«ï¼æ以å¨server端ç代ç ä¸ç¨ç¨ææä¸åã
æ¯è¾ä¸ä¸jsonä¸jsonpæ ¼å¼çåºå«ï¼
jsonæ ¼å¼ï¼
{
"message":"è·åæå",
"state":"1",
"result":{"name":"å·¥ä½ç»1","id":1,"description":"11"}
}
jsonpæ ¼å¼ï¼
callback({
"message":"è·åæå",
"state":"1",
"result":{"name":"å·¥ä½ç»1","id":1,"description":"11"}
})
çåºæ¥åºå«äºå§ï¼å¨urlä¸callbackä¼ å°åå°çåæ°æ¯ç¥é©¬callbackå°±æ¯ç¥é©¬ï¼jsonpæ¯jsonå¤é¢æå¤äºä¸å±ï¼callback()ãè¿æ ·å°±ç¥éæä¹å¤çå®äºãäºæ¯ä¿®æ¹åå°ä»£ç ã
åå°java代ç æç»å¦ä¸ï¼
å¤å¶ä»£ç
@RequestMapping(value = "/getGroupById")
public String getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "è·åæå", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "è·å失败", Constants.RESULT_FAILED);
}
String json = JsonConverter.bean2Json(result);
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print(callback + "(" + json + ")");
return null;
}
å¤å¶ä»£ç
注æè¿ééè¦å
å°æ¥è¯¢ç»æ转æ¢æjsonæ ¼å¼ï¼ç¶åç¨åæ°callbackå¨jsonå¤é¢åå¥ä¸å±ï¼å°±åæäºjsonpãæå®æ°æ®ç±»å为jsonpçajaxå°±å¯ä»¥åè¿ä¸æ¥å¤çäºã
è½ç¶è¿æ ·è§£å³äºè·¨åé®é¢ï¼è¿æ¯å顾ä¸é æparsererrorçåå ãåå å¨äºç²ç®çæjsonæ ¼å¼çæ°æ®å½åjsonpæ ¼å¼çæ°æ®è®©ajaxå¤çï¼é æäºè¿ä¸ªé误ï¼æ¤æ¶server端代ç æ¯è¿æ ·çï¼
å¤å¶ä»£ç
@RequestMapping(value = "/getGroupById")
@ResponseBody
public ReturnObject getGroupById(@RequestParam("id") Long id,
HttpServletRequest request, HttpServletResponse response){
String callback = request.getParameter("callback");
ReturnObject result = null;
Group group = null;
try {
group = groupService.getGroupById(id);
result = new ReturnObject(group, "è·åæå", Constants.RESULT_SUCCESS);
} catch (BusinessException e) {
e.printStackTrace();
result = new ReturnObject(group, "è·å失败", Constants.RESULT_FAILED);
}
return result;
}
å¤å¶ä»£ç
è³æ¤è§£å³ajaxè·¨åé®é¢ç第ä¸ç§æ¹å¼å°±åä¸æ®µè½ã
追å ä¸ç§è§£å³æ¹å¼
追æ±æ°¸æ æ¢å¢ï¼å¨googleçè¿ç¨ä¸ï¼æ æä¸åç°äºä¸ä¸ªä¸é¨ç¨æ¥è§£å³è·¨åé®é¢çjQueryæ件-jquery-jsonpã
æ第ä¸ç§æ¹å¼çåºç¡ï¼ä½¿ç¨jsonpæ件ä¹å°±æ¯è¾ç®åäºï¼server端代ç æ éä»»ä½æ¹å¨ã
æ¥çä¸ä¸å¦ä½ä½¿ç¨jquery-jsonpæ件解å³è·¨åé®é¢å§ã
å¤å¶ä»£ç
var url="
http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("å½åå·¥ä½ç»:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});