发送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)
 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

发起的请求地址会拼接为: /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
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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