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> <!--接下来引入JQuery最小版本的库文件 -->
<script src="jquery.min.js" type="text/javascript"></script>
<!-- 接下来引入自己写的 js 文件 -->
<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/> <!-- 下面这一句原本是为了使用form表单的方式来调用post方法的 -->
<!-- <input type="submit" value="开始登录"> --> <!-- 使用“登录”按钮的onclick事件来调用js文件,执行post方法的异步请求 -->
<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("服务器忙……请稍后重试!");
}
}); }

前端登录时的界面截图:

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

登录后的界面截图:

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

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

上一篇:利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载


下一篇:会声会影X6-高级运动等效果的练习实践-与您分享...