前端与后端接口的交互案例

一、案例描述

1，前端页面提供用户名，密码输入框。
2，通过Ajax发送请求到后端Serlvet。
3，后端Serlvet处理请求，根据输入的用户名和密码返回给前端不同信息

前端访问后端接口通过后端提供的的URL

二、主要代码

1、前端页面

<!DOCTYPE html><html><head><title>login.html</title><meta charset="utf-8"></head><！-- 待补充的javaScript Ajax请求代码 在下面 --！><body>    <form action="#">        username:<input type="text" name="username"><br>        password:<input type="password" name="password"><br>        <input type="button" value="submit" id="submit">    </form></body></html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如图：简单到不忍直视的页面
这里写图片描述

2、Ajax请求代码

这里使用了jquery-1.8.3.js库，顺便回顾下函数的书写格式
格式：jQuery.ajax([settings])
                 *      参数settings：设置所有的参数,JSON对象
                 *          data:请求参数
                 *          type:请求方式 (“POST” 或 “GET”)，
                 *          success:成功的回调函数，function(data, [textStatus], [jqXHR])
                 *          error:请求失败时调用函数
                 *          dataType:预期服务器返回的数据类型

<script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">    $(function(){        $("#submit").click(function(){        var url = "/myblog/servlet/loginServlet";        var params = {"username":$("input[type='text']").val(), "password":$("input[type='password']").val()};        $.ajax({                "url" : url,                "data" : params,                "type" : "post",                "success" : function(data) {                    // 参数为json类型的对象                    alert(data.message)                },                "error" : function() {                    alert("用户名或者密码错误");                }            });        });    });</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3、Servlet代码及web.xml配置
写这个，有点弱智了，但为了代码的完整性，忍一下吧！
web.xml

  <servlet>    <servlet-name>LoginServlet</servlet-name>    <servlet-class>com.imooc.login.LoginServlet</servlet-class>  </servlet> <servlet-mapping>    <servlet-name>LoginServlet</servlet-name>    <url-pattern>/servlet/loginServlet</url-pattern>  </servlet-mapping>1
2
3
4
5
6
7
8
9

servlet:

public class LoginServlet extends HttpServlet {    private static final long serialVersionUID = 5417488369543075097L;    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        String username = request.getParameter("username");        String password = request.getParameter("password");        String message = "{\"message\":\"登录成功\"}";        response.setContentType("application/json;charset=utf-8");        if("双击".equals(username) && "666".equals(password)) {            response.getWriter().write(message);        }    }    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        this.doGet(request, response);    }}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19