发送jsonp请求(前后端如何实现)

发送jsonp请求(前后端如何实现)

• 前端

 $.ajax({url: '/api/jsonp',type: 'get',data: { id: '123' }, // 参数dataType: 'jsonp',jsonp: 'cb', // 回调函数的参数名jsonpCallback: 'successfn',// 回调函数contentType: "application/json; charset=utf-8",success: function(response) {console.log(response);}})// jsonp请求成功回调function successfn(res) {console.log(res)}

发起的请求地址会拼接为: /api/jsonp?cb=successfn&id=123

• 后端(以java为例)

import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.fastjson.JSON;
@RestController
@RequestMapping("/api")
public class JsonpController {@GetMapping("/jsonp")public String test(@RequestParam("cb")String cb, @RequestParam("id")String id) {Map<String, Object> map = new HashMap<String, Object>();map.put("code", 200);map.put("data", Arrays.asList(new String[]{"1","2","3"}));String result = JSON.toJSONString(map);return cb+"("+result+")";}
}

说明:
如果用户期望返回数据：[“1”,“2”,“3”]
那么真正返回到客户端的数据(字符串格式)应为: callbackFunction([“1”,“2”,“3”])
本示例返回的数据应为: successfn([“1”,“2”,“3”])