《用AJAX实现图书记录的添加》

实验目的及要求

在数据库中建立表 T _ BOOK ，其包含图书 ID 、图书名称、图书价格。制作“添加图书”界面，在界面上有一个表单，输人书本号、书本名称和价格，提交，能够用 INSERT 语句向 T _ BOOK 表中插人记录，但是页面不刷新。

 

数据库建表：

前端代码：

<%@ page contentType="text/html; charset=utf-8"%>

	
		 
		 
		
		
欢迎进入图书管理系统. 

		 

		

			

				

					
书本号:
					

				
				

					
图书名称:
					

				
				

					
图书价格:
					

				
				

					

				
			
		

		
	

后端代码：

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.beans.Statement;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

/**
 * @Author 陈平安
 * @Date 2022/5/24 19:36
 * @PackageName:servlets
 * @ClassName: book
 * @Description: TODO
 * @Version 1.0
 */
@WebServlet("/book")
public class book extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String account1 = request.getParameter("id");
        System.out.println(account1);
        int account = account1==null||account1.equals("") ? 0: Integer.valueOf(account1);
        String password = request.getParameter("bookname");
        String b =request.getParameter("bookprice");
        int price = b==null||b.equals("") ? 0: Integer.valueOf(b);
        try {
            // 加载数据库驱动
            Class.forName("com.mysql.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8";
            String un = "root";         //MySql用户名
            String pa = "cjd";  //MySql密码
            // 建立数据库连接，获得连接对象conn
            Connection conn = DriverManager.getConnection(url, un, pa);
            //     Statement st = (Statement) conn.createStatement();
            String sql = "Insert into t_book(idd,tname,price) values(?,?,?)"; // 生成一条sql语句
            // 创建一个Statment对象
            PreparedStatement ps = conn.prepareStatement(sql);

            // 为sql语句中第一个问号赋值
            ps.setInt(1, account);
            // 为sql语句中第二个问号赋值
            ps.setString(2, password);
            // 为sql语句中第三个问号赋值
            ps.setInt(3, price);
            // 为sql语句中第四个问号赋值

            // 执行sql语句
            int n = ps.executeUpdate();
            // 关闭数据库连接对象
            conn.close();
//            ps.close();

            if (n == 1) {
                System.out.println("插入完毕！！！");
            } else {
                System.out.println("插入失败！！！");
            }

        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            System.out.println("error1");
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            System.out.println("error2");
        }
    }

}

---

实验数据（现象） 记录及结果处理 可附页

结果搜索栏地址未变化，实验正确。   后台查验数据库数据是存在的：

 个人解读：

	if(window. XMLHttpRequest){ //Mozilla等浏览器
	   			xmlHttp=new XMLHttpRequest();
				}
				else if(window.ActiveXObject){ //IE浏览器
	    			try{
						xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
					}catch(e){
	        			try{
	        				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	        			}catch(e){
	        				window.alert("该浏览器不支持AJAX");
	                    }
					}

让Ajax可以适应任何浏览器，而不仅仅是ie浏览器。

这个标签万万不能省略，否则界面无法跳转。

至于原因就是我也不是很清楚，后续完善。

• @WebServlet("/book")

  这个不用说了，懂得都懂。

•     @Override
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
      }

  如果你的

  xmlHttp.open("POST", url, true);    这个地方你选择post就是dopost,如果你的是doget就是用doget，这两个还是有所区别的，

•  request.setCharacterEncoding("UTF-8");

  再然后就是编码问题，这个问题着实令我很是困扰但是后来还是绞尽脑汁，搞出来了。

• 就是但凡是涉及到编码的问题，统统改成你需要的编码格式。前端代码编码格式：

  <%@ page contentType="text/html; charset=utf-8"%>

  包括后来的数据库编码格式也是utf-8就很好的解决了中文卡乱码的问题，至于数字，虽然是统一的，但是，向数据库传输的时候，还是乱码。其实对于各种的编码问题，我以前就写过相关的博客，有兴趣的可以查阅。

• 说一说数字乱码的问题，一般来说，数字的乱码的问题，我遇到过的，就是向数据库传输数据的时候，想用char类型代替int类型，完成传输，但是，事实上，不可取的，会乱码。所以，不要偷懒，int就是Int类型，不然都用char类型算了。

• 	var url = "http://localhost:8080/servlets/book?id="+id+"&bookname="+bookname+"&bookprice="+bookprice;

  这个，千万不要写错，不然会出现乱码，而且还是很难得修复的问题，，因为乱码的时候，潜意识回去认为是设置的编码问题，而很少回去查看这个路径的问题。我就是遇到过，编码其实是没有问题的，。

•   String account1 = request.getParameter("id");
          System.out.println(account1);
          int account = account1==null||account1.equals("") ? -1: Integer.valueOf(account1);

  这个代码段的作用就是为了防止界面抛出数字异常和空指针的异常，但是一般设置为负数，因为不符合实际。-1就可以。

• 剩下的就是套路，没啥说的。