jQuery-Ajax技术一

最新推荐文章于 2023-06-01 08:45:46 发布

李胖圆

最新推荐文章于 2023-06-01 08:45:46 发布

阅读量312

点赞数 4

分类专栏：记录全面实例文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/weixin_45686583/article/details/114370835

版权

实例同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

全面

40 篇文章 0 订阅

订阅专栏

记录

32 篇文章 0 订阅

订阅专栏

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）数据库中有此用户，账号不能使用：
在这里插入图片描述

不忘初心，砥砺前行

李胖圆

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
jQuery-Ajax技术一

jQuery-Ajax技术一Ajax的技术的产生：Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。AJAX 如何工作：AJAX 基于因特网标准，并使用以下技术组合：XMLHttpRequest 对象（与服务器异步交互数据）。JavaScript/DOM（显示/取回信息）。CSS（设置数据的样式）。XML（常用作数据传输的格式）。实例：User
复制链接

扫一扫