java编程（1）——servlet和Ajax异步请求的接口编程（没有调用数据库的数据）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

编程应用背景：

使用HttpServlet接口来编写一个动态登录的接口（需要在Tomcat容器发布）

登录的 LoginSample 类代码：

package com.zhang.java; public class LoginSample {
public LoginSample() { //构造方法
// System.out.println("构造方法被调用！");
} public boolean login(String ln, String pwd) {
if (ln != null && ln.length() > 2 && ln.length() < 17
&& pwd != null && pwd.length() > 2 && pwd.length() < 17) {
if (ln.equals("zzp") && pwd.equals("")) {//设置的静态登录名和登录密码，没有调用数据库的信息
System.out.println("恭喜您，登录成功!");
return true;
} else {
System.out.println("用户名或密码错误！");
}
} else {
System.out.println("参数错误！");
}
return false;
} }

登录后台的代码：

package com.zhang.java; import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class LoginTry
*/
@WebServlet("/LoginTry")
public class LoginTry extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public LoginTry() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub // 返回值编码的修改
response.setContentType("text/html;charset=UTF-8");
// 收到的参数的编码修改
request.setCharacterEncoding("UTF-8"); String user = request.getParameter("loginname");
String pwd = request.getParameter("password"); LoginSample ls = new LoginSample();
Boolean result = ls.login(user, pwd); // 创建一个info信息来说明登录结果
String info = "{\"method\":\"get\",";
if (result) {
info += "\"status\":200,\"msg\":\"恭喜您登录成功！\"";
} else {
info += "\"status\":500,\"msg\":\"抱歉，您登录失败！\"";
}
info += "}";
// 控制台输出登录的info信息
// System.out.println(info); // 接口返回信息
response.getWriter().append("get方法被调用！" + user + pwd).append(request.getContextPath());
} /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub // 返回值编码的修改
response.setContentType("text/html;charset=UTF-8");
// 收到的参数的编码修改
request.setCharacterEncoding("UTF-8"); String user = request.getParameter("userid");
String pwd = request.getParameter("pwds"); LoginSample ls = new LoginSample(); //调用LoginSmaple类来创建一个登录的实例ls Boolean result = ls.login(user, pwd);//创建一个变量来存储登录结果 String info = "{\"method\":\"post\","; //创建一个info信息来说明登录结果 if(result) {//使用登录结果作为判断条件
info+="\"status\":200,\"msg\":\"恭喜您登录成功！\"";
}
else {
info+="\"status\":500,\"msg\":\"抱歉，您登录失败！\"";
}
info += "}";
System.out.println(info);//控制台输出info信息
response.getWriter().append(info);//接口返回结果 } }

前端登录页面HTML代码：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>zzp的网页</title> 
<script src="jquery.min.js" type="text/javascript"></script>

<script src="test.js" type="text/javascript"></script> </head> <body >
<h1 align="center">Hello HTML</h1> <form id="loginForm" method="post" action="./LoginTry">
<div id="info" style="text-align:center">
<p>请输入您的账号：</p>
<input type="text" name="userid" placeholder="登录名" />
<br/>
<p>请输入您的密码：</p>
<input type="password" name="pwds" placeholder="密码" />
<br/><br/> 
 
<input type="button" onclick="javascript:loginJS()" value="登录" /> </div>
</form> </body>
</html>

test.js脚本代码：

/**
* 登录界面中“登录”按钮会调用的js方法
*/ function loginJS() { // 定义一个存放URL的变量,指定请求的接口地址
var AjaxURL = "http://localhost:8080/LoginInterServlet/LoginTry";//Tomcat中服务的地址和接口 $.ajax({
url : AjaxURL,
type : "post", // 采用post方法
dataType : "json", // 请求和返回的参数格式；如果是非json格式需要使用text格式
// 获取id=loginForm的form表单中的参数
data : $('#loginForm').serialize(),
// 当接口调用成功时，执行success中的方法，result参数指的是接口返回的信息
success : function(result) {
// result[***]表示的是对应的键经过解析后的值
// alert("status:"+result["status"]+", "+result["msg"]); //如果登录成功，将id=“info”的元素改为接口返回值中“msg”信息
$('#info')[0].innerText=result["msg"];
},
// 当接口调用失败时，执行error中的方法
error : function() {
alert("服务器忙……请稍后重试！");
}
}); }