发送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”])