Ajax调用数据库进行局部刷新

最新推荐文章于 2022-06-13 14:25:10 发布

Litch_

最新推荐文章于 2022-06-13 14:25:10 发布

阅读量536

点赞数 3

文章标签： ajax mysql java

本文链接：https://blog.csdn.net/litch_/article/details/107320249

版权

1. 首先创建JSP文件

<body>
    <p>ajax根据省份id获取名称</p>
    <table>
      <tr>
        <td>省份编号：</td>
        <td><input type="text" id="proid"/>
            <input type="button" value="搜索" onclick="search()" />
        </td>
      </tr>
      <tr>
        <td>省份名称：</td>
        <td><input type="text" id="proname" /></td>
      </tr>
    </table>
  </body>

2.在JSP文件中创建Ajax
使用Ajax四步骤：
1.创建异步对象
2. 绑定事件
3. 初始化异步对象
4. 发送请求

<script type="text/javascript">
	 //创建ajax异步对象
	 function search(){
		
		 var xmlHttp =new XMLHttpRequest();
			//绑定事件
			xmlHttp.onreadystatechange = function () { 
		               if( xmlHttp.readyState == 4 && xmlHttp.status== 200){
		                alert("返回值是："+xmlHttp.responseText);
		                 //更新页面，就是更新dom对象
		                 document.getElementById("proname").value= xmlHttp.responseText;
		               }
		           }
			//初始化异步对象
			 var proid = document.getElementById("proid").value;
			 xmlHttp.open("get","queryProvice?proid="+proid,true);
			//发送请求
			xmlHttp.send();
	 }
	
</script>

3.创建DAO层连接数据库

public class ProvinceDao {
	   public String queryProviceNameById(Integer proviceId){
		
		   Connection conn = null;
		   PreparedStatement pst = null;
		   ResultSet rs = null;
		   String sql = "";
		   
		   String url="jdbc:mysql://localhost:3306/info?useUnicode=true&characterEncoding=utf8";
		   String username="root";
		   String password="123456";
		   
		   String name ="";
		   try {
			Class.forName("com.mysql.jdbc.Driver");
			conn=DriverManager.getConnection(url, username, password);
			sql = "select name from province where id=?";
			pst= conn.prepareStatement(sql);
			pst.setInt(1, proviceId);
			rs = pst.executeQuery();
			if(rs.next()) {
				name = rs.getString("name");
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		   try {
			if(conn !=null) {
				conn.close();
			}
			if(pst != null) {
				pst.close();
			}
			if(rs!=null) {
				rs.close();
			}
		} catch (Exception e) {
			// TODO: handle exception
		}
		   return name;
		   
	   }
	  
}

4.创建servlet层处理请求

@WebServlet(name="QueryProviceServlet",urlPatterns = "/queryProvice")
public class QueryProviceServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public QueryProviceServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String strProid = request.getParameter("proid");
		String name = "默认是无数据";
		System.out.println(strProid);
		if(strProid !=null && !"".equals(strProid.trim())){
			 ProvinceDao dao  = new ProvinceDao();
			 name =dao.queryProviceNameById(Integer.valueOf(strProid));
			 
	}
		response.setContentType("text/html;charset=utf-8");
        PrintWriter pw  = response.getWriter();
        pw.println(name);
        pw.flush();
        pw.close();
	}
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

5.创建数据库文件

SET FOREIGN_KEY_CHECKS=0;


DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL COMMENT '省份名称',
  `jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',
  `shenghui` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;


INSERT INTO `province` VALUES ('1', '河北', '冀', '石家庄');
INSERT INTO `province` VALUES ('2', '山西', '晋', '太原市');
INSERT INTO `province` VALUES ('3', '内蒙古', '蒙', '呼和浩特市	');
INSERT INTO `province` VALUES ('4', '辽宁', '辽', '沈阳');
INSERT INTO `province` VALUES ('5', '江苏', '苏', '南京');
INSERT INTO `province` VALUES ('6', '浙江', '浙', '杭州');
INSERT INTO `province` VALUES ('7', '安徽', '皖', '合肥');
INSERT INTO `province` VALUES ('8', '福建', '闽', '福州');
INSERT INTO `province` VALUES ('9', '江西', '赣', '南昌');

总结：使用Ajax技术实现jsp页面局部刷新
1.给按钮添加响应事件，在search事件里面创建Ajax异步对象，绑定事件，初始化异步对象，发送请求。
2.在DAO层创建带有Id参数值的方法，通过获得jsp页面输入的参数，进行对数据库的指定查询。
3.将jsp输入的值提交到servlet层，在servlet层调用DAO层的方法进行查询数据，得到数据后通过PrintWriter进行返回数据到jsp文件。
ps：本人小白，以上是本人学习Ajax局部刷新技术的心得，有不足之处还请大家海涵。