0
点赞
收藏
分享

微信扫一扫

Vue(四)——总结

程序员伟杰 2024-08-15 阅读 24
javascript

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

  • 后端(以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+")";
	}
}

举报

相关推荐

学习总结四

Vue总结

四、Vue事件

Servlet 学习总结(四)

MySql总结(四)----事务

css手册总结(四)

Vue源码总结

Vue完整总结

0 条评论