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

前端部分

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

后端部分

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

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请求，然后返回的数据里面定义你可以判断是否被注册了了的键值对。

本文地址：https://blog.csdn.net/qq_43265564/article/details/110205582