之前是用form表单提交数据到后台,form表单提交会导致整个页面重新加载会显得不方便,如果不想要页面跳转,我们就用到了ajax请求,这边用的是jQuery ajax。之前页面做的也很丑,这次使用miniui前台框架完成。
新建一个jsp
代码如下
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>文本提示</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="demo.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="scripts/boot.js" type="text/javascript"></script>
<style type="text/css">
.errorText
{
color:red;
}
</style>
</head>
<body>
<div id="form1">
<table>
<tr>
<td>
<label for="username$text">帐号:</label>
</td>
<td>
<input name="username" errorMode="none" onvalidation="onUserNameValidation" vtype="email" class="mini-textbox" required="true" requiredErrorText="帐号不能为空"/>
</td>
<td id="username_error" class="errorText"></td>
</tr>
<tr>
<td>
<label for="pwd$text">密码:</label>
</td>
<td>
<input name="pwd" errorMode="none" onvalidation="onPwdValidation" class="mini-password" required="true" vtype="minLength:5" minLengthErrorText="密码不能少于5个字符"/>
</td>
<td id="pwd_error" class="errorText"></td>
</tr>
<tr>
<td>
</td>
<td>
<input value="Login" type="button" onclick="submitForm()" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
mini.parse();
function submitForm() {
debugger;
var form = new mini.Form("#form1");
form.validate();
if (form.isValid() == false) return;
//提交数据
var data = form.getData();
var json = mini.encode(data);
$.ajax({
url:"login",
type:"post",
data:data,
async:false,
success:function(msg){
if(msg=="cg"){
alert("登录成功");
window.location.href="index.jsp"
}else if(msg=="sb"){
alert("账号或密码错误");
}else if(msg=="null"){
alert("无当前用户");
}
},
error:function(res){
alert("返回出错");
}
})
}
//
function updateError(e) {
var id = e.sender.name + "_error";
var el = document.getElementById(id);
if (el) {
el.innerHTML = e.errorText;
}
}
function onUserNameValidation(e) {
updateError(e);
}
function onPwdValidation(e) {
updateError(e);
}
</script>
</body>
</html>
新建一个Servlet
代码如下
package cn.com.selevt;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.com.db.DBUtil;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public LoginServlet() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
String pwd=request.getParameter("pwd");
Connection conn=DBUtil.getMySqlConn();
String sql="select * from user where username='"+username+"'";
try {
Statement stmt=conn.createStatement();
ResultSet rs=stmt.executeQuery(sql);
String bj="";
if(rs.next()) {
String Pwd=rs.getString("password");
if(Pwd.equals(pwd)) {
bj="cg";
}else {
bj="sb";
}
}else {
bj="null";
}
PrintWriter out=response.getWriter();
out.write(bj);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
连接数据库文件
代码如下
package cn.com.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBUtil {
// 设置成私有的
private static Connection conn; // 连接对象
private static final String username = "root"; // 数据库用户名
private static final String password = "root"; // 数据库密码
private static final String url = "jdbc:mysql://localhost:3306/login?characterEncoding=UTF-8"; //"login"是指你的数据库名称 //3306是端口
private static final String driver = "com.mysql.jdbc.Driver";// 数据库驱动
public static Connection getMySqlConn() {
try {
try {
Class.forName(driver);
}catch (ClassNotFoundException e) {
System.out.println("加载驱动包失败");
e.printStackTrace();
}
conn=DriverManager.getConnection(url,username,password);
}catch(SQLException e) {
System.out.println("获取连接失败"+e.getMessage());
}
return conn;
}
}
配置xml需要名称保持一致,这边就不细说了。
目录结构如下
利用muniui前台框架需要去官网下载一些文件,详情可见官网
这里需要引入jquery.js 下载链接:https://download.csdn.net/download/xiaobai_jq/12376919