idea servlet 前后端分离实例

第一步：在idea下建一个javaWEB工程；

第二步：新建一个工程，不需要在web下写些前端，因为想在HBuild中写前端；

第三步：在controller包下新建一个servlet，我这里命名叫Servlet1,代码如下：

protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
    String name=request.getParameter("name");
    System.out.println(name);
    PrintWriter out = response.getWriter();
    try{
        out.write(name);
        out.flush();
    }catch (Exception e){
        e.printStackTrace();
    }finally {
        out.close();
    }
}

第三步：打开HBuilder编辑器，新建一个html项目，

idea servlet 前后端分离实例

index2.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$('#name').val();
if(name==""){
alert("姓名不能为空！");
return;
}
$.ajax({
url: "http://localhost:8080/servlet2_war_exploded/xxx", //向这个网址进行提交，这个网址是先运行后端后从浏览器地址栏拷贝过来的。
data: {"name": name},
type:'post',

//dataType:'json', //这一句在此处不能要，因为我这里返回的是一个string，所以要了后反而在前端收不到后端发送过来的数据。
success: function (data) {
$('#h1').text(data);
},
error: function () {
console.log("error")
}
});
});
});
</script>
</head>
<body>
<form id="form1">
请输入姓名：<input type="text" name="name" id="name"><br/>
<input type="button" name="btn" id="btn" value="提交" />
<input type="reset" name="rebtn" id="rebtn" value="重置">
</form>
<h1 id="h1"></h1>
</body>
</html>

第四步：要想后端的数据能正常返给前端，还后端还必须建一个Filter类，让它能跨域，没有这个后端的数据返不到前端。

package serviceImp;


import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class HeaderFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域访问报错
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1.
        response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0");
        filterChain.doFilter(servletRequest, servletResponse);
    }
    @Override
    public void destroy() {
    }
}

第五步：仅仅是做好上面的是不行的，还要把前端和后端用web.xml联系起来

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <filter>
        <filter-name>HeaderFilter</filter-name>
        <filter-class>serviceImp.HeaderFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HeaderFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <servlet>
        <servlet-name>Servlet1</servlet-name>
        <servlet-class>controller.Servlet1</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Servlet1</servlet-name>
        <url-pattern>/xxx</url-pattern>
    </servlet-mapping>
</web-app>

第六步：先运行后端，得知后端的URL后，把它填到前端的ajax的URL中，在前端中提交数据，就可以发送到java后台；java后台处理后，就可以再返到前端了，完美解决。

idea servlet 前后端分离实例

参考网址：https://blog.****.net/qinyf2015/article/details/79426227

https://blog.****.net/u012972294/article/details/103717259?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

https://www.cnblogs.com/JavaMVC/articles/6943624.html

idea servlet 前后端分离实例

相关推荐