前后端分离之后的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baijunzhijiang_01/article/details/50999560

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