前后端分离之后的问题

1. 前台获取后端数据：

前台通过ajax请求访问接口，请求数据。例如post请求：

var courseUrl = "http://localhost:8080/future/course/findCourseByTeacherId";
var data = {"teacherId":"15101","other":"me too"};
$.post(courseUrl,data,function(result){
var json=$.parseJSON(result);
var obj=json.data;
for(var i=0;i<obj.length;i++){
var trs="";
spans+="<span id='update'>"+obj[i].courseName+"</span>";

}
$("#courseList").append(spans);
});

2. json的跨域问题

跨域问题可通过cors方法解决。在springmvc框架下，可新建一个CorsFitler类，对返回的response加上

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Component;
@Component
public class CorsFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}

<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.future.study.filter.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

Access-Control-Allow-Origin

3. JQuery获取ajax请求中的数据

$.post("http://localhost:8080/future/class/findAllClassInfoByTeacherId",
{teacherId:10151},
function(result){
var spans="";
var json=$.parseJSON(result);
var obj=json.data;
for(var i=0;i<obj.length;i++){
var trs="";
spans+="<option value='"+obj[i].id+"'>"+obj[i].classname+"</option>";
}
$("#classList").append(spans);
});