JAVA+JSP+AjAX实现异步刷新查询书籍和实时检测用户名是否被注册

最近在学习JSP和Slevet,所以写了一个常见的小功能,这里我将详细解说自己的前后端代码。

前端部分

  1. 整体思路分析:实现有一个输入框,来输入一本书籍的名字,然后一个点击按钮,来通过AJAX实现异步请求请求后台返回数据,后台接受到数据进行查询,返回一个JSON数据格式的结构,前台再拿到这个数据进行前端操作。
  2. 前端代码:我之前写的一个关于AJAX的博客,具体代码思路都在里面
  3. 通过这个可以看出,此时我们传输了一个{“name”:“红楼梦”}随便取个数据打个比方。这个时候,我们就需要写后台代码了,然后来获取这个数据进行返回响应。

后端部分

  1. 实现需要导入必要的包,这点我作为小白还是要说一下的,不然看那些大神的博客,很多基础细节不说对我们小白很不友好。

  2. 在这里插入图片描述

  3. 首先解说一下上面这个整体的文件项目。这个是一个JaveWeb的项目,我要说的有几点:1----jsp文件和Web-INF文件夹同级。
    2—当你新建web项目时一直别直接finish,点next,后面有一个创建web.xml的选项,这个最好选中。
    3—导入的外部包放在这个lib文件下就可以了。
    在这里插入图片描述

  4. 再解说上面这张图片:
    1-----这个Java Resources用来存放java源代码的,我建的这几个包中com.office.selvet用来存放selvet程序,com.office.enitiy 存放的javabean类
    2----最上面那个com.offce.dao是返回相对应的javabean对象的结果集

  5. web.xml部分:
    在这里插入图片描述
    1----首先需要注册selvet程序需要在xml中进行配置有两个标签:
    <servlet></servlet>和<servlet-mapping></servlet-mapping>
    其中第一个里面写两个一个是selvet的类名,和全地址名
    后面也有两个属性标签,一个是selvet的类名和虚拟地址。

  6. 此时就可以写代码了。
    在这里插入图片描述

先获取ajax输入的值,就可以写sql语句查询了,注意字符编码问题,我这个定义了一个数据库查询类用来获取sql语句进行查询返回结果,返回类型为JSON类型。
1*******:数据库部分代码:


```java
public static JSONObject ajaxBooks(String sql) {
		ArrayList<Object> bookslist=new ArrayList<>();
		JSONObject jaJsonObject=new JSONObject();
		try {
			Class.forName("com.mysql.jdbc.Driver");
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		Connection conn = null;
		try {
			conn = DriverManager.getConnection(URL, USER, PASSWORD);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		PreparedStatement stmt = null;
		try {
			stmt = (PreparedStatement) conn.prepareStatement(sql);
			ResultSet set=stmt.executeQuery();
			while (set.next()) {
				Books books=new Books();
				books.setId(new Integer(set.getString("id")));
				books.setName(set.getString("Name"));
				books.setAuthor(set.getNString("Author"));
				books.setPrice(new Double(set.getString("Price")));
				bookslist.add(books);
			}
			if (bookslist==null) {
				return null;
			}else {
				jaJsonObject.put("booklist",bookslist);
			}
			
			set.close();
			conn.close();
			return jaJsonObject;
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
		
	}

最终实现效果:

在这里插入图片描述
请忽略我的css,我们只谈功能哈,关于鼠标失去输入框焦点然后实时检测是否用户名被注册,就是一个类似功能,只是在文本框失去焦点中进行ajax请求,然后返回的数据里面定义你可以判断是否被注册了了的键值对。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值