使用SpringBoot完成jsonp
一.什么是jsonp?
JSONP(JSON with Padding)是JSON的一种“使用模式”,并不是一个单独技术
1.ajax请求不支持跨域数据请求的.
1.1 跨域
1.1.1 ip不同
1.1.2 端口不同.
1.2 为什么不支持跨域
1.2.1 因为JS在研发Ajax处于安全性考虑,把ajax跨域功能关闭.
2.在项目中的静态资源,.js文件, .css文件, 图片等都是可以通过标准的http请求进行访问.
2.1 在浏览器地址栏进行直接输入静态资源地址都可以访问.
2.2 把最终需要的json数据放入到js文件中.模拟请求js文件.
2.3 js文件在请求时以流的形式返回给客户端
二.代码演示
总体思路
2.1 客户端脚本代码,需要使用$.ajax函数.jsonp请求要求服务器端返回的js文件的内容格式必须是:方法名(json格式数据)
2.1.1 jsonp:参数名称替代默认callback,必须与服务端的参数名保持一致
2.1.2 jsonpCallback:jsonp参数对应的值,最终回调函数名
2.1.3 success:成功后回调,也可以在$(function(){})外面编写对应名称的函数,等待ajax请求成功后回调.
编写代码
第一个SpringBoot项目第一个JSONP1,只含有一个jsp文件 用于调用另一个SpringBoot项目实现跨域请求
3.1pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.fpy</groupId>
<artifactId>jsonp1</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>jsonp1</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.5.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
3.2添加jsp支持
这一步非常简单如果不懂可以参照SpringBoot支持jsp
3.3界面
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>跨域测试</title>
<script src="js/jquery-1.9.1.js"></script>
<script>
function showData() {
}
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: 'http://localhost:8082/student',
type: 'GET',
dataType:'jsonp',
jsonp:'a',//必须和参数名保持一致
jsonpCallback:"cc",//回调函数的名字随便起
success: function (data) {
console.log(data);
alert(data);
var s = "";
for(var i = 0;i<data.length;i++){
s+=data[i].name+data[i].major+data[i].age;
}
$("#tt").val(s);
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="tt" style="width: 500px; height: 200px;"></textarea>
</body>
</html>
第二个SpringBoot项目第一个JSONP2,只含有一个controller文件 用于反馈数据
package com.fpy.controller;
import com.fpy.pojo.Student;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
@Controller
public class JSONP2 {
@RequestMapping("/student")
@ResponseBody
public MappingJacksonValue student(String a){//注意参数的名字与界面jsonp后对应的保持一致
System.out.println("进入--->jsonp2\t"+a);
//数据准备a
List<Student> list = new ArrayList<>();
for(int i = 0;i<4;i++){
Student student = new Student("张飞"+i,i+1,i*10+1,"美术"+i);
list.add(student);
}
//专门处理jsonp数据的类
MappingJacksonValue mjv = new MappingJacksonValue(list);
//设置回调函数
mjv.setJsonpFunction(a);
//最终返回的是一个js代码
///**/cc([{"name":"张飞0","age":1,"id":1,"major":"美术0"},{"name":"张飞1","age":2,"id":11,"major":"美术1"},{"name":"张飞2","age":3,"id":21,"major":"美术2"},{"name":"张飞3","age":4,"id":31,"major":"美术3"}]);
return mjv;
}
}
pojo类:Student
package com.fpy.pojo;
public class Student {
private String name;
private int age;
private int id;
private String major;
public Student() {
}
public Student(String name, int age, int id, String major) {
this.name = name;
this.age = age;
this.id = id;
this.major = major;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getMajor() {
return major;
}
public void setMajor(String major) {
this.major = major;
}
}
最终效果: