1.新建前后端文件

新建HTML文件和后端交互Servlet文件。新建文件的地址也有所要求，Servlet文件要在JavaResources下的src中。HTML文件在WebContent下

2. 引入jqury文件

后端与前端的互传需要通过jQuery的ajax,所以要传入jQuery的包到eclipse中，传入位置与HTML文件一致，放在WebContent下（同样css文件或其他img等都可以放在该目录下）

3.前端内容

在前端界面书写jquery内容。ajax格式如下。

<script src="js/jquery.js"></script>
<script>$.ajax({url:"testServlet",type:"get", //请求方式 get postsuccess:function(value){console.log(value)},error:function(){alert("出错啦")},})
</script>

其中，“url”为所连接后端的文件名称。

“success”为请求成功时执行的代码 ，“error”为// 请求失败时执行的代码   

“type”为不同的请求方式，get post传参形式不同，请求方式post需要传入data域（账户密码为例）

data:{account:account,password:password}

只要能写地址的地方，都可以发起get请求 浏览器地址栏 a location.herf='' 查找，而post方式必须通过jquery +ajax实现 。

get请求通常用来查找，而post请求用于增删改

4.后端内容

新建一个Servlet文件，我们会发现，Servlet中有两个函数doGet和doPost.分别用于接受不同请求方式。

doGet函数中一些简单的语法示例：(从本地数据库的tests表中返回name,num,date三类数据)

其中MysqlUtil是提前写好的方法包，当然方法也可以自己写。导入即可。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");//设置后端给前端返回的数据为json格式（大量数据）response.setContentType("text/json;charset=utf-8");//接收参数//查找String sql="SELECT * from tests";String[] colums= {"name","num","date"};String res=MysqlUtil.getJsonBySql(sql, colums);//后端给前端返回数据response.getWriter().write(res);}

doPost函数中一些简单的语法示例:与doGet不同doPost需要接受前端的参数。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");//设置后端给前端返回的数据为json格式（大量数据）response.setContentType("text/json;charset=utf-8");//接受前端的参数String account=request.getParameter("account");String password=request.getParameter("password");//执行sql语句（查找数据库里是否有目的账号）String sql="select count(*) FROM user WHERE account=\""+account+"\"";int num=MysqlUtil.add(sql);if(num>0) {res="{\"code\":1,\"message\":\"该账号存在\"}";}else {res="{\"code\":0,\"message\":\"该账号不存在\"}";}response.getWriter().write(res);}