前端与后端接口的交互案例
一、案例描述
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>
如图：简单到不忍直视的页面
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>
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>
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);
}
}
result picture:
