前后端分离之后的问题

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加上

• 此处为CorsFilter类

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() {}
}

• 在web.xml中加入Filter

	<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请求中的数据

正在使用的Jquery的Post请求

$.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);
				});