1.Ajax：定义
Ajax即Asynchronous(异步的) Javascript And XML，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上
使用Ajax，使得前端和数据库实现交互，例如，在登录验证中，使得输入框旁边可以提示用户名是否存在
2.为什么使用Ajax
局部刷新，不重新加载网页的的情况下，对网页某个网页进行更新，提高性能。
3.语法：
$.ajax使用方法
$.ajax({});中间添加内容，添加常用属性如下：
常用参数：
1、url 请求地址（相当于form表单中的action中的路径）
2、type 请求方式，默认是'get'，常用的还有'post'（相当于form表单中的method）
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'text'
4、data 设置发送给服务器的数据（相当于绑定的值）
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步（和除了ajax外的语言同步执行与否）
4.登录案例：
4.1创建工程并导入包
创建web工程，在WEB-INF中创建lib文件夹，和js文件夹
lib中导入：
javax.servlet.jar,
jstl.jar,
mysql-connector-java-5.1.7-bin.jar,
servlet-api.jar,
standard.jar
js中导入：
js的包
4.2分包：
工程中创建包：entity，util，dao，test，service，servlet，jsp
(entity,util,dao,test,service,servlet,jsp)
4.3实体类：
package entity;
public class User {
private int id;
private String name;
private String pwd;
public User(int id, String name, String pwd) {
this.id = id;
this.name = name;
this.pwd = pwd;
}
public User() {
}
public User(String name, String pwd) {
this.name = name;
this.pwd = pwd;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
}4.4工具类：
封装对数据库的操作
package cn.xs.util;
import java.io.Serializable;
import java.sql.*;
public class BaseDao {
//三个对象
//定义连接对象
protected static Connection connection;
//定义预编译对象
protected static PreparedStatement preparedStatement;
//定义结果集对象
protected static ResultSet resultSet;
//连接数据库的方法
public static void getConnection() {
try {
//注册驱动
Class.forName("com.mysql.jdbc.Driver");
//管理连接
connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/work1", "root", "111");
//测试连接对象
System.out.println("连接" + connection);
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}
}
//关闭数据库的方法
public static void closeConnection() {
try {
//关闭各对象
if (connection != null)
connection.close();
if (preparedStatement != null)
preparedStatement.close();
if (resultSet != null)
resultSet.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
//通用的增删改的方法
public int executeUpdate(String sql, Object[] params){
int flag = 0;
//调用连接方法
getConnection();
try {
//调用方法，传递sql语句给数据库
preparedStatement = connection.prepareStatement(sql);
if (params != null){
//循环将方法中的参数塞入结果集
for (int i = 0; i <params.length; i++){
preparedStatement.setObject(i+1,params[i]);
}
}
//执行处理方法
flag = preparedStatement.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
} finally {
closeConnection();
}
return flag;
}
//通用的查询方法
public ResultSet executeQuery(String sql,Object[] params){
getConnection();
try {
preparedStatement = connection.prepareStatement(sql);
if (params != null){
for (int i = 0; i <params.length; i++){
preparedStatement.setObject(i+1,params[i]);
}
}
resultSet = preparedStatement.executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
return resultSet;
}
//测试
public static void main(String[] args) {
getConnection();
}
}4.5Dao：
创建UserDao接口，定义要实现的功能
package dao;
import entity.User;
public interface UserDao {
//定义用户名是否存在
// public User findByName(String name);
//定义校验用户名和密码是否同时正确
// public User findByNamePwd(User user);
//定义查找
public User find(String name,String pwd);
}实现：
package dao;
import entity.User;
import util.BaseDao;
import java.sql.SQLException;
import java.util.ArrayList;
public class UserDaoImpl extends BaseDao implements UserDao {
// @Override
// public User findByName(String name) {
// rs = super.query("select * from t_user where name = ?",new Object[]{name});
// User user = null;
// try {
// while (rs.next()){
// user = new User(rs.getInt("id"),rs.getString("name"),rs.getString("pwd"));
// }
// } catch (SQLException e) {
// e.printStackTrace();
// } finally {
// closeConn();
// }
// return user;
// }
//
// @Override
// public User findByNamePwd(User user) {
// rs = super.query("select * from t_user where name = ? and pwd = ?",new Object[]{user.getName(),user.getPwd()});
// User user1 = null;
// try {
// while (rs.next()){
// user1 = new User(rs.getInt("id"),rs.getString("name"),rs.getString("pwd"));
// }
// } catch (SQLException e) {
// e.printStackTrace();
// } finally {
// closeConn();
// }
// return user1;
// }
@Override
public User find(String name, String pwd) {
StringBuffer sql = new StringBuffer("select * from t_user where 1=1");
ArrayList<Object> params = new ArrayList<>();
if (name != null && !"".equals(name)) {
sql.append(" and name = ?");
params.add(name);
}
if (pwd != null && !"".equals(pwd)) {
sql.append(" and pwd = ?");
params.add(pwd);
}
rs = super.query(sql.toString(), params.toArray());
User user = null;
try {
while (rs.next()) {
user = new User(rs.getInt("id"), rs.getString("name"), rs.getString("pwd"));
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
closeConn();
}
return user;
}
}两种查询合并成一种
4.6service层
package service;
import entity.User;
public interface UserService {
//校验方法
public String validate(User user);
}
package service;
import dao.UserDao;
import dao.UserDaoImpl;
import entity.User;
public class UserServiceImpl implements UserService {
private UserDao userDao = new UserDaoImpl();
@Override
public String validate(User user) {
//返回的标识
String message = "";
//如果jsp页面name有值,开始进行判断
if (user.getName()!=null && !"".equals(user.getName())){
//按照用户名查找
User user1 = userDao.find(user.getName(),null);
//没找到标识设置100
if (user1==null){
message = "100";
} else {
//找到以后继续判断密码
User user2 = userDao.find(user.getName(),user.getPwd());
if (user2==null){
message="200";
}
}
}else {
if (user.getPwd()!=null && !user.getPwd().equals("")){
message="200";
}
}
return message;
}
}4.7servlet
package servlet;
import entity.User;
import service.UserService;
import service.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class UserServlet extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String action = request.getParameter("action");
if (action.equals("toLogin")){
request.getRequestDispatcher("login.jsp").forward(request,response);
} else if (action.equals("validate")){
String name = request.getParameter("name");
String pwd = request.getParameter("pwd");
UserService userService = new UserServiceImpl();
User user = new User(name,pwd);
String validate = userService.validate(user);
response.getWriter().print(validate);
}
}
}
4.8login.jsp
登录界面配置Ajax和登录函数，用来判断
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录界面</title>
</head>
<body>
<form id="xx">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="name" onblur="validate()"><span style="color: red" id="message1"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="pwd" onblur="validate()"><span style="color: red" id="message2"></span></td>
</tr>
<tr>
<td><input type="button" value="提交" id="loginBtn" onclick="login()"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//初始化函数
$(function () {
});
function validate() {
var flag = true;
$.ajax({
"url": "http://localhost:8080/UserServlet?action=validate", // ut2d
"type": "post",
async: false,
"data": {"name": $("[name=name]").val(), "pwd": $("[name=pwd]").val()},
"dataType": "text",
"success": function (name) {
$("#message1").empty();
$("#message2").empty();
if (name == "100") {
$("#message1").text("用户名不存在");
flag = false;
return false;
}
if (name == "200") {
$("#message2").text("用户名或密码错误");
flag = false;
return false;
}
},
"error": function () {
}
});
return flag;
}
function login() {
var flag = validate();
if (flag) {
window.location.href = "index.jsp";
}
}
</script>
</html>
5238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
