第一步,编写web.xml
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<error-page>
<error-code>404</error-code>
<location>/404.html</location>
</error-page>
第二步登录页面,这里只做简单的登录操作
$('#loginForm').submit(function () {
Ajax.postForm({url: 'localhost:8081/login',
data: {
'username': $username.val(),
'password': $password.val()
},
beforeSend: function () {
if ($username.val() == '') {
alert('请输入用户名!');
$username.focus();
return false;
}
if ($password.val() == '') {
alert('请输入密码!');
$password.focus();
return false;
}
}
js代码
postForm: function (options) {
$.ajax({
url: options.url,
type: 'POST',
contentType : 'application/x-www-form-urlencoded',
data: options.data,
beforeSend: options.beforeSend,
success: options.success,
error: options.error
});
},
接下来就是比较重要的服务端
跨域方面需要注意,jsonp只支持get请求
这里我们使用的是cors
首先在web.xml中加入拦截器.允许localhost:8081
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>cors.CorsFilter</filter-class>
<init-param>
<param-name>allowOrigin</param-name>
<param-value>http://localhost:8081</param-value>
</init-param>
<init-param>
<param-name>allowMethods</param-name>
<param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>allowCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>allowHeaders</param-name>
<param-value>Content-Type,X-Token,X-Username</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
关于拦截器实体类
private String allowOrigin;
private String allowMethods;
private String allowCredentials;
private String allowHeaders;
private String exposeHeaders;
@Override
public void init(FilterConfig filterConfig) throws ServletException {
allowOrigin = filterConfig.getInitParameter("allowOrigin");
allowMethods = filterConfig.getInitParameter("allowMethods");
allowCredentials = filterConfig.getInitParameter("allowCredentials");
allowHeaders = filterConfig.getInitParameter("allowHeaders");
exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
if (StringUtil.isNotEmpty(allowOrigin)) {
List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
if (CollectionUtil.isNotEmpty(allowOriginList)) {
String currentOrigin = request.getHeader("Origin");
if (allowOriginList.contains(currentOrigin)) {
response.setHeader("Access-Control-Allow-Origin", currentOrigin);
}
}
}
if (StringUtil.isNotEmpty(allowMethods)) {
response.setHeader("Access-Control-Allow-Methods", allowMethods);
}
if (StringUtil.isNotEmpty(allowCredentials)) {
response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
}
if (StringUtil.isNotEmpty(allowHeaders)) {
response.setHeader("Access-Control-Allow-Headers", allowHeaders);
}
if (StringUtil.isNotEmpty(exposeHeaders)) {
response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
}
chain.doFilter(req, res);
}
@Override
public void destroy() {
}
编写model和controller
下面是controller中接收到的参数,并打印出来
public Response login(
@Valid LoginParam param
) {
// 获取登录信息
String username = param.getUsername();
String password = param.getPassword();
System.out.println(username);