封装jsonp
1.写一个类封装jsonp:
jsonp(url, params, success, funName)
参数url:请求地址
参数params:请求数据,可以是json对象,或形如"name=zs&age=10"的字符串,或null
参数success:jsonp请求成功回调函数
参数funName:指定服务端响应数据包裹json对象的函数名,也可以不传该参数
/* * jsonp必须是get请求 * 参数: * url:请求地址, * params:请求体, * success:回调函数 * funName: 函数名,jsonp返回数据会调用该函数 */ function jsonp(url, params, success, funName) { // 如果params是json对象,转换成字符串,格式为"name=张三&age=10" if(params && typeof params == 'object') { var tempArray = []; for(var key in params) { var value = params[key]; tempArray.push(key + "=" + value); } // tempArray ==> [ 'key1=value1', 'key2=value2'] // params ==> 'key1=value1&key2=value2' params = tempArray.join("&"); //alert("params:" + params); // params:name=张三&age=10 } var script = document.createElement("script"); if(!funName) { // 定义一个随机的函数名 var funName = 'callback_' + Date.now() + Math.random().toString().substr(2, 5); } // 函数定义,jsonp返回数据会调用该函数 window[funName] = function(data) { success(data); delete window[funName]; document.body.removeChild(script); } //script.src = "http://localhost/Demo01/jsonResult?jsonp=funName"; url = url + "?" + "jsonp=" + funName; if(params) { url += "&" + params; } script.src = url; document.body.appendChild(script); // 发送跨域请求,服务器返回数据:funName({"name":"李四","age":20}) }
2.测试
调用自己封装的函数:jsonp(url, params, success, funName),服务端响应:fun1({"name":"李四","age":20})
<script type="text/javascript"> window.onload = function() { var btn = document.getElementById("btn"); btn.onclick = function() { jsonp("http://localhost/Demo01/jsonResult", null, function(data) { var fontEle = document.getElementById("font"); fontEle.innerHTML = data.name + "-" + data.age; }, "fun1"); }; }; </script> <input type="button" id="btn" value="点击发送Ajax请求"/> <h1><font color="red" id="font"></font></h1>
3.服务端controller:
@Controller public class JsonResultController { @RequestMapping("/jsonResult") @ResponseBody public String fun1(String jsonp) { if(jsonp.length() > 0) { // jsonp请求 return jsonp + "(" + "{\"name\":\"李四\",\"age\":20}" + ")"; } else { return "{\"name\":\"李四\",\"age\":20}"; } } }
posted on 2019-02-28 22:20 wenbin_ouyang 阅读(326) 评论(0) 编辑 收藏 举报