第一步：在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项目，
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后台处理后，就可以再返到前端了，完美解决。
参考网址：https://blog.csdn.net/qinyf2015/article/details/79426227
https://www.cnblogs.com/JavaMVC/articles/6943624.html