基础实践:使用JQuery Ajax调用Servlet

news2024/11/25 9:50:15

前言

本博客介绍最简单的JQuery(原生JS的封装库)使用Ajax发送请求,并通过对应的servlet响应数据,并在页面显示,并且servlet响应的数据来自MySQL数据库。

实现需求:在前端页面的输入框中输入要注册的用户名,动态查询数据库中指定用户名是否存在,若存在给出提示,若不存在也给出相应提示。

项目结构

 数据库的SQL支持

本项目使用原生的JDBC连接MySQL数据库,并进行操作,为了简化开发,封装了操作JDBC的工具类

数据库表

这个数据库表,是我沿用以前存在的项目中的表,实际上如果创建一个符合当前项目的用户表只需要保留基本字段user_id(用户id,唯一标识),user_name(用户名)

 本来应该创建一个实体类与数据库表相对应,但是现在省略了,因为只是演示简单字符串对比,不需要拿实体类接收数据库传回的数据。

导入JDBC工具类,并书写DAO层

DBUtil

连接自己的数据库

package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

public class DBUtil {
    private final static String DRIVER="com.mysql.cj.jdbc.Driver";
    private final static String URL="jdbc:mysql://localhost:3306/csx_demo?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull";
    private final static String DBNAME="root";
    private final static String DBPASS="root";

    public static Connection getConn(){
        Connection conn=null;
        try {
            Class.forName(DRIVER);
            conn= DriverManager.getConnection(URL,DBNAME,DBPASS);
        }catch (Exception e){
            e.printStackTrace();
        }
        return conn;
    }


    public static void closeAll(Connection conn, Statement st, ResultSet rs){
        try {
            if (rs!=null){
                rs.close();
            }
            if (st!=null){
                st.close();
            }
            if (conn!=null){
                conn.close();
            }

        }catch (Exception e){
            e.printStackTrace();
        }

    }

}

UserDao

package dao;

public interface UserDao {

    boolean checkUserName(String username);
}

UserDaoImpl

判断用户名是否存在,若存在返回true,不存在返回false

package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class UseDaoImpl extends DBUtil implements UserDao{
    Connection conn=null;
    PreparedStatement pstmt=null;
    ResultSet rs=null;


    @Override
    public boolean checkUserName(String username) {
        conn=getConn();
        boolean flag=false;
        try {
            String sql="select user_name from t_user where user_name = ?";
            pstmt=conn.prepareStatement(sql);
            pstmt.setString(1,username);
            rs=pstmt.executeQuery();
            if (rs.next()){
                flag=true;
            }


        } catch (SQLException e) {
            throw new RuntimeException(e);
        }

        return flag;
    }
}

创建过滤器,保证编解码字符集保持一致

EncodingFilter

将所有请求拦截下来,设置统一字符集(UTF-8)

package filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter("/*")
public class EncodingFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        servletRequest.setCharacterEncoding("UTF-8");
        servletResponse.setCharacterEncoding("UTF-8");

        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

创建前端页面,使用JQuery发生Ajax请求给servlet

reg.html

  • type:指定请求的方式为post
  • url:请求的servlet路径
  • data:传入servlet的参数
  • msg:代表servlet响应的数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
<body>

<body>
注册账号: <input type="text" id="username" name="username"> <span id="usermsg"></span>
</body>
<script>
    $(function(){
        $("#username").blur(function(){
            $.ajax({
                type:'POST',
                url:'/checkName',
                data:{
                    username:$("#username").val()
                },
                success:function(msg){
                    if(msg=="true"){
                        $("#usermsg").html("用户名已占用").css("color","red");
                    }else{
                        $("#usermsg").html("用户名可以使用").css("color","green");
                    }
                }
            });

        });
    })


</script>

</body>
</html>

创建Servlet获取页面发送的参数,并响应

CheckNameServlet

注意:因为前端页面和后端的java的数据类型并不是通用的,因此需要将数据转换成字符串类型进行传递;servlet通过PrintWriter将数据返回给页面的msg

package servlet;



import dao.UseDaoImpl;
import dao.UserDao;

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;
import java.io.PrintWriter;

@WebServlet("/checkName")
public class CheckNameServlet  extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username= request.getParameter("username");
        UserDao userDao=new UseDaoImpl();
        boolean result= userDao.checkUserName(username);

        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out= response.getWriter();

        if (result){
            response.setContentType("text/html;charset=UTF-8");
            out= response.getWriter();
            out.print("true");
        }else{
            out.print("false");
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

项目演示效果

reg.html页面

如果账号存在:

如果账号不存在:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2164790.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024年_ChatGPT 及类似的人工智能技术带来的影响与改变 怎样利用 ChatGPT 提高学习效率

人工智能技术给我们带来了什么的改变&#xff1a; 工作方式与效率&#xff1a; 信息检索与处理&#xff1a;能快速整合大量信息&#xff0c;提供较为准确的答案和建议&#xff0c;帮助人们更高效地获取所需知识&#xff0c;提升信息检索和处理的速度与质量&#xff0c;比如在做…

Git版本控制的使用教程

使用Git进行项目代码的版本控制&#xff0c;具体操作&#xff1a; 1). 创建Git本地仓库 当Idea中出现&#xff1a; 说明本地仓库创建成功。 2). 创建Git远程仓库 访问Gitee - 基于 Git 的代码托管和研发协作平台&#xff0c;新建仓库 点击 创建 3). 将本地文件推送到Git远程…

Java【根据数据库生成实体文件】

下载插件 安装 MybatisX 配置包 Scratches and Consoles -> Extensions&#xff0c;Reload from Disk 后&#xff0c;会出现 MyBatisX 文件夹&#xff0c;将模板配置文件夹&#xff08;我的模板配置文件夹叫做 a-custom&#xff09;放入该文件夹下的 templates 文件夹内&am…

【欧拉函数变化】[SDOI2012] Longge 的问题

求和 gcd(i,j) 转化为 k*gcd(i/k,j/k) 1 (i,j%k 0)。 本质就是利用互质转化到了欧拉函数的领域上。 [SDOI2012] Longge 的问题 - 洛谷 转自小粉兔 #include<bits/stdc.h> #define int long long using namespace std; unordered_map<int,int>pd; long long…

天润融通发布微藤智能体平台,中国客户联络正式进入“智能体时代”

9月19日&#xff0c;以“云启智跃&#xff0c;产业蝶变”为主题的2024云栖大会在杭州正式开幕。大会持续三天&#xff0c;聚焦AI时代的技术升级与实践应用&#xff0c;设有三大主论坛、400多个分论坛&#xff0c;并开放4万平方米的智能科技展区&#xff0c;展示全球百余款AI应用…

20_BERT微调训练

1.导包 import json #通过路径加载预训练模型 import os import torch from torch import nn import dltools2.加载预训练模型BERT函数 def load_pretrained_model(pretrained_model, num_hiddens, ffn_num_hiddens,num_heads, num_layers, dropout, max_len, devices):dat…

David律所代理Jose Martin幽默水果版权首发维权,尚未TRO

案件基本情况&#xff1a;起诉时间&#xff1a;2024/9/18案件号&#xff1a;2024-cv-08484原告&#xff1a;Jose Martin原告律所&#xff1a;David起诉地&#xff1a;伊利诺伊州北部法院涉案商标/版权&#xff1a;原告品牌简介&#xff1a;西班牙的卓越艺术家Jose Martin以他非…

linux 下80端口被占用

先看报错&#xff1a; [rootlocalhost ~]# nginx nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address alread…

专业版【命令行下载离线安装包及依赖】

UOS统信专业版命令行下载应用商店应用软件的离线安装包及依赖的相关信息。 文章目录 应用场景一、解决方案1.首先需要确认待下载应用的软件包名称。打开应用商店&#xff0c;找到想下载的应用&#xff0c;这里以【企业微信】为例&#xff1a;2.点击应用版本右侧切换按钮&#x…

docker - 迁移和备份

文章目录 1、docker commit1.1、查询 容器 docker ps1.2、docker commit zookeeper zookeeper:3.4.13 2、docker save -o2.1、宿主机 切换到 /opt 目录下2.2、将镜像保存到 宿主机/opt目录下 3、docker load -i 对某一个容器修改完毕以后&#xff0c;我们可以把最新的容器部署到…

三、LLM应用开发准备工作

LLM应用开发准备工作 开发基础开发工具大模型kxswkey的配置与使用工具推荐结语 开发基础 最好具备一定的Python开发基础&#xff0c;不需要特别深 如果不具备&#xff0c;可以先学习一下基础知识&#xff08;概念&#xff09;&#xff0c;比如Python环境管理、包管理与使用、基…

数据结构(Day20)

一、学习内容 树形结构 概念 (1树是n个元素的有限集合 n0 空树 n>0 有且只有一个根结点 其他的结点 互不相交的子集 树具有递归性&#xff1a;树中有树 树的术语 (结点&#xff1a;树的数据元素 (根结点&#xff1a; 唯一的 没有前驱(没有双亲) 叶子&#xff1a;终端结…

One API本地开发环境搭建

One API本地开发环境搭建 简介 摘要 &#xff1a; 本文介绍如何在本地搭建 One API 开发环境&#xff0c;包括安装 Go 语言和 GoLand IDE&#xff0c;以及如何新建项目和配置数据库信息。通过简明的步骤说明&#xff0c;帮助开发者快速完成基本的开发环境配置&#xff0c;方…

Vue2/3封装按钮Loding

Vue2/3封装按钮Loding 1、Vue3 基于如下平常代码&#xff0c;我们可以发现&#xff0c;两个按钮逻辑中&#xff0c;有很多重复代码(开启loding&#xff0c;关闭loding)&#xff0c;并且正式项目中会有很多按钮会发送请求 <template><el-button click"test"…

漫步者开放式耳机怎么样值得买吗?南卡、漫步者、QCY热门开放式耳机实测推荐!

​开放式耳机目前已经成为蓝牙耳机中的顶流&#xff0c;网上很多人都在讨论这类耳机&#xff0c;这类耳机的优点在于高佩戴舒适度以及在听歌时可以感知环境&#xff0c;更加安全&#xff0c;因此作为一名数码博主&#xff0c;今天也回应粉丝的要求&#xff0c;买了三款开放式耳…

客户流失、裁员、增长放缓后,PayPal股价重新“起飞”的时机已到来

猛兽财经核心观点&#xff1a; &#xff08;1&#xff09;PayPal的股价已经从2023年的最低点上涨了45%以上。 &#xff08;2&#xff09;随着增长放缓&#xff0c;该公司正在制定一系列扭亏为盈的战略。 &#xff08;3&#xff09;与主要竞争对手相比&#xff0c;它的估值相对偏…

气压高度加误差的两种方法(直接添加 vs 换算到气压误差),附MATLAB程序

在已知高度真实值时,如果需要计算此高度下的气压计误差,可考虑本文所述的两种方法 气压高度 气压与高度之间的关系可以用大气压的垂直变化来描述。随着高度的增加,气压通常会下降。这是因为空气的密度在高度增加时减少,导致上方空气柱对下方空气施加的压力减小。 主要关系…

物理学基础精解【20】

文章目录 简化二次方程轴平移轴平移是一种简化二次方程图形表示的有用技巧一元二次方程的轴平移二元二次方程的轴平移轴平移简化二次方程定义性质计算例子一元二次方程的例子二元二次方程的例子&#xff08;圆&#xff09; 例题 轴旋转简化二次方程轴旋转的定义轴旋转的性质例题…

应用层 I(C/S模型、P2P模型、域名系统DNS)【★★】

&#xff08;★★&#xff09;代表非常重要的知识点&#xff0c;&#xff08;★&#xff09;代表重要的知识点。 一、网络应用模型 在网络边缘的端系统之间的通信方式通常可划分为两大类&#xff1a;客户 - 服务器方式&#xff08;C/S 方式 [Client/Server] &#xff09;和对等…

Prometheus篇之利用promtool工具校验配置正确性

promtool工具 promtool是Prometheus的一个命令行工具&#xff0c;它提供了一些功能来帮助用户进行Prometheus配置文件&#xff08;如prometheus.yml&#xff09;的检查、规则检查和调试。 解释 promtool check config: 验证Prometheus配置文件的语法和设置。 promtool命令&…