前端异步请求并解决跨域问题（Ajax+axios框架）、后端响应多个数据（JSON）

package com.yyds.webback2.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter(urlPatterns = "/*")
public class CorsFilter implements Filter {
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
            throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
        //允许携带Cookie时不能设置为* 否则前端报错
        httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
        httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie

        filterChain.doFilter(servletRequest, servletResponse);
    }
}

配置解决跨域过滤器：

    <filter&gt;
        <filter-name&gt;csf</filter-name&gt;
        <filter-class&gt;com.yyds.webback2.filter.CorsFilter</filter-class&gt;
    </filter>
    <filter-mapping>
        <filter-name>csf</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

前端基于Ajax异步交互（原生态）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function checkAccount(account){
				var httpobj = new XMLHttpRequest();
				httpobj.open("get","http://127.0.0.1:8080/webBack2/reg?account="+account,true);
				httpobj.send();
				httpobj.onreadystatechange=function(){
					//接收后端响应的数据
					// alert(httpobj.responseText);
					document.getElementById("aid").innerHTML = httpobj.responseText;
				}
			}
			
		</script>
	</head>
	<body>
		<form>
			用户<input type="text" name="account" value="" onblur="checkAccount(this.value)"/><span id="aid"></span><br />
			密码<input type="text" name="psd" value=""/><br />
		</form>
		
	</body>
</html>

后端响应：

package com.yyds.webback2.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class RegServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setHeader("Content-Type","text/html;charset=utf-8");
        PrintWriter pt = resp.getWriter();
        String account = req.getParameter("account");
        if (account.equals("admin")){
            pt.write("账号已经存在");
        }else {
            pt.write("成功注册");
        }
    }
}

效果：

4.axios 框架（封装后）

官方下载axios.min.js，将包放入前端js文件夹中，然后在前端页面导入使用框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/axios.min.js" type="text/javascript"></script>
		<script>
			function checkAccount(account){
				axios.get("http://127.0.0.1:8080/webBack2/reg?account="+account).then(function(resp){
					// console.log(resp.data);
					document.getElementById("aid").innerHTML = resp.data;
				})
				// axios.post("http://127.0.0.1:8080/webBack2/reg","account="+account+"&amp;age=20").then(function(resp){
				// 	document.getElementById("aid").innerHTML = resp.data;
				// })
			}
			
		</script>
	</head>
	<body>
		<form method="post">
			用户<input type="text" name="account" value="" onblur="checkAccount(this.value)"/><span id="aid"></span><br />
			密码<input type="text" name="psd" value=""/><br />
		</form>	
	</body>
</html>

二、后端向前端响应多个数据-JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

将数据封装到对象中响应到前端，首先向后端加载JSON包：

json包中有ObjectMap per() 类：将封装的对象转为json形式，即转为字符串。

例如响应一个Student对象：

后端：使用doPost

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setHeader("Content-Type","text/html;charset=utf-8");
        PrintWriter pt = resp.getWriter();
        String num = req.getParameter("num");
        Student student = new Student(num,"张三","男","12345678910");
        ObjectMapper objectMapper = new ObjectMapper();
        String s = objectMapper.writeValueAsString(student);
        System.out.println(s);
        resp.getWriter().print(s);
    }

前端：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/axios.min.js" type="text/javascript"></script>
		<script>
			function checkAccount(num){
				axios.post("http://127.0.0.1:8080/webBack2/reg","num="+num).then(function(resp){
					// document.getElementById("aid").innerHTML = resp.data;
					console.log(resp.data.num);
					console.log(resp.data.name);
					console.log(resp.data.gender);
					console.log(resp.data.phone);
					
				})
			}	
		</script>
	</head>
	<body>
		<form method="post">
			学号<input type="text" name="num" value="" onblur="checkAccount(this.value)"/><br />
			<!-- <span id="aid"></span><br /> -->
		</form>
	</body>
</html>