jQuery-Ajax技术一
- Ajax的技术的产生:
Ajax被认为是(Asynchronous JavaScript and XML的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。
- AJAX 如何工作:
- AJAX 基于因特网标准,并使用以下技术组合:
XMLHttpRequest 对象(与服务器异步交互数据)。
JavaScript/DOM(显示/取回信息)。
CSS(设置数据的样式)。
XML(常用作数据传输的格式)。
实例:
User 实体类:
package cn.zbw.domain;
public class UserInfo {
private int id;
private String username;
private String password;
private String email;
private String gender;
private int flag;
private int role;
private String code;
public UserInfo(int id, String username, String password, String email, String gender, int flag, int role, String code) {
this.id = id;
this.username = username;
this.password = password;
this.email = email;
this.gender = gender;
this.flag = flag;
this.role = role;
this.code = code;
}
public UserInfo() {
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public int getFlag() {
return flag;
}
public void setFlag(int flag) {
this.flag = flag;
}
public int getRole() {
return role;
}
public void setRole(int role) {
this.role = role;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
@Override
public String toString() {
return "UserInfo{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
", email='" + email + '\'' +
", gender='" + gender + '\'' +
", flag=" + flag +
", role=" + role +
", code='" + code + '\'' +
'}';
}
}
接口:
package cn.zbw.dao;
import cn.zbw.domain.UserInfo;
public interface IUserInfo {
// 根据用户名查找用户
public UserInfo findname(String username);
}
接口实现类:
package cn.zbw.dao.impl;
import cn.zbw.dao.IUserInfo;
import cn.zbw.domain.UserInfo;
import cn.zbw.utils.DBHelper;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class IUserInfoImpl implements IUserInfo {
@Override
public UserInfo findname(String username) {
UserInfo us=null;
Connection conn = DBHelper.getConn();
String sql = "select * from tb_user where username=?";
try {
PreparedStatement ps = conn.prepareStatement(sql);
ps.setString(1,username);
ResultSet rs = ps.executeQuery();
if (rs.next()){
us = new UserInfo();
us.setId(rs.getInt(1));
us.setUsername(rs.getString(2));
us.setPassword(rs.getString(3));
us.setEmail(rs.getString(4));
us.setGender(rs.getString(5));
us.setFlag(rs.getInt(6));
us.setRole(rs.getInt(7));
us.setCode(rs.getString(8));
}
} catch (SQLException e) {
e.printStackTrace();
}
return us;
}
}
JSP页面:
<%--
Created by IntelliJ IDEA.
User: ASUS
Date: 2021/03/02
Time: 上午 11:49
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>学习Ajax</title>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$("[name=username]").blur(function () {
$.ajax({
type:"get",
url:"finduser?name="+$("[name=username]").val(),
dataType:"text",
success:function (data){
alert(data);
if(data=="1"){
$("#show").html("用户名已存在!");
}else{
$("#show").html("用户名可以使用");
}
}
});
});
});
</script>
<form action="#" method="post">
账号<input type="text" name="username"><span id="show"></span><br/>
密码<input type="password" name="pwd"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
Servlet 类:
package cn.zbw.web.servlet;
import cn.zbw.dao.IUserInfo;
import cn.zbw.dao.impl.IUserInfoImpl;
import cn.zbw.domain.UserInfo;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/finduser")
public class FindUser extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
// 设置编码格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 接收页面传输的数据
String name = request.getParameter("name");
// 调用根据用户名查找用户的方法
IUserInfo iu = new IUserInfoImpl();
UserInfo ui = iu.findname(name);
if (ui!=null){
response.getWriter().write("1");
}else {
response.getWriter().write("2");
}
}
}
数据库数据:
结果是:
(1)数据库中没有此用户,账号可以使用:
(2)数据库中有此用户,账号不能使用:
不忘初心,砥砺前行