springmvc和ajax的全部例子
阿新 • • 發佈:2018-11-27
function jajax1() { var reqdata = { p1:'success' } $.ajax({ url: '/testreq/jsonreq', type: 'get',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: reqdata,//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端 @RequestMapping("/jsonreq") @ResponseBody public Map jsonreq(@RequestParam(value = "p1", required = false) String p1) { Map map = new HashMap(); map.put("p1",p1); return map; } 引數p1=success 返回 {"p1":"success"} */ } function jajax2() { var reqdata = { p1:'success' } $.ajax({ url: '/testreq/jsonreq', type: 'get',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify(reqdata),//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端1 @RequestMapping("/jsonreq") @ResponseBody public Map jsonreq(@RequestParam(value = "p1", required = false) String p1) { Map map = new HashMap(); map.put("p1",p1); return map; } 後端2 @RequestMapping("/jsonreq2") @ResponseBody public Map jsonreq2(@RequestBody String p1) { Map map = new HashMap(); map.put("p1",p1); return map; } 引數 {%22p1%22:%22success%22} 返回 400 (Bad Request) */ } function jajax3() { var reqdata = { p1:'success' } $.ajax({ url: '/testreq/jsonreq3', type: 'post',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: reqdata,//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端 @RequestMapping(value = "/jsonreq3", method = RequestMethod.POST) @ResponseBody public Map jsonreq3(@RequestBody String p1) { Map map = new HashMap(); map.put("p1",p1); return map; } === 前端 data:JSON.stringify(reqdata) 引數 {"p1":"success"} 返回 {"p1":"{\"p1\":\"success\"}"} === 前端 data:reqdata 引數 p1=success 返回 {"p1":"p1=success"} */ } function jajax4() { var reqdata = { p1:'success' } $.ajax({ url: '/testreq/jsonreq4', type: 'post',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify(reqdata),//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端 @RequestMapping(value = "/jsonreq4", method = RequestMethod.POST) @ResponseBody public Map jsonreq4(@RequestParam Map<String, String> params) { return params; } === 前端 data:JSON.stringify(reqdata) 引數 {"p1":"success"} 返回 {} === 前端 data:reqdata 引數 p1=success 返回 {} */ } function jajax5() { var reqdata = { p1:'success' } $.ajax({ url: '/testreq/jsonreq5', type: 'get',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify(reqdata),//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端 @RequestMapping("/jsonreq5") @ResponseBody public Map jsonreq5(@RequestParam Map<String, String> params) { return params; } === 前端 data:JSON.stringify(reqdata) 引數 {%22p1%22:%22success%22} 返回 400 Bad Request === 前端 data:reqdata 引數 p1=success 返回 {"p1":"success"} */ } function jajax6() { var reqdata = { p1:'success', p2:'ok' } $.ajax({ url: '/testreq/jsonreq6', type: 'get',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify(reqdata),//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端 @RequestMapping("/jsonreq6") @ResponseBody public Map jsonreq6(@RequestBody Map<String, String> params) { return params; } === 前端 data:JSON.stringify(reqdata) 引數 {%22p1%22:%22success%22,%22p2%22:%22ok%22} 返回 400 Bad Request === 前端 data:reqdata 引數 p1=success&p2=ok 返回 400 Bad Request */ } function jajax7() { var reqdata = { p1:'success', p2:'ok' } $.ajax({ url: '/testreq/jsonreq7', type: 'post',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: reqdata,//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端 @RequestMapping(value = "/jsonreq7", method = RequestMethod.POST) @ResponseBody public Map jsonreq7(@RequestBody Map<String, String> params) { return params; } === 前端 data:JSON.stringify(reqdata) 引數 {"p1":"success","p2":"ok"} 返回 {"p1":"success","p2":"ok"} === 前端 data:reqdata 引數 p1=success&p2=ok 返回 400 Bad Request */ } function jajax8() { var reqdata = { p1:'success', p2:[1,2,3], p3:['1','2','3'] } $.ajax({ url: '/testreq/jsonreq8', type: 'get',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: reqdata,//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端 @RequestMapping(value = "/jsonreq8", method = RequestMethod.GET) @ResponseBody public Map jsonreq8(@RequestParam Map<String, String> params) { return params; } === 前端 data:JSON.stringify(reqdata) 引數 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}: 返回 400 Bad Request === 前端 data:reqdata p1: success p2[]: 1 p2[]: 2 p2[]: 3 p3[]: 1 p3[]: 2 p3[]: 3 引數 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3 返回 {"p1":"success","p2[]":"1","p3[]":"1"} //改後 @RequestMapping(value = "/jsonreq8", method = RequestMethod.GET) @ResponseBody public Map jsonreq8( @RequestParam(value="p1", required=false,defaultValue="") String p1, @RequestParam(value="p2[]", required=false,defaultValue="") String p2, @RequestParam(value="p3[]", required=false,defaultValue="") String p3 ) { Map map = new HashMap(); map.put("p1",p1); map.put("p2",p2); map.put("p3",p3); return map; } === 前端 data:JSON.stringify(reqdata) 引數 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}: 返回 400 Bad Request ===SUCCESS 前端 data:reqdata p1: success p2[]: 1 p2[]: 2 p2[]: 3 p3[]: 1 p3[]: 2 p3[]: 3 引數 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3 返回 {"p1":"success","p2":"1,2,3","p3":"1,2,3"} */ } function jajax9() { var reqdata = { p1: 'success', p2: [1, 2, 3], p3: ['1', '2', '3'] } $.ajax({ url: '/testreq/jsonreq9', type: 'post',//請求方式,get或post async: true,//如果async設定為:true,則不會等待ajax請求返回的結果,會直接執行ajax後面的語句,,預設為true非同步 contentType: 'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify(reqdata),//JSON.stringify(reqdata) success: function (response, textStatus, jqXHR) { console.log(response); }, error: function (XMLHttpRequest, textStatus, errorThrown) { var errInfo = { XMLHttpRequest: XMLHttpRequest, textStatus: textStatus, errorThrown: errorThrown, success: false } console.log(errInfo); } }); /* 測試: 後端 @RequestMapping(value = "/jsonreq9", method = RequestMethod.POST) @ResponseBody public Map jsonreq7(@RequestBody Map<String, String> params) { return params; } === 前端 data:JSON.stringify(reqdata) 引數 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]} 返回 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]} === 前端 data:reqdata 引數 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3 返回 400 Bad Request */ }