文章目录：
1.写在前面
上一篇文章中，简单的介绍了一下什么是AJAX？以及AJAX中一些重要的概念和XMLHttpRequest对象这些内容。
那么，这篇文章就用第二个实例结束AJAX吧！！！
2.第二个实例的步骤
2.1 IDEA中使用maven创建一个web项目
2.2 在pom.xml中加入需要使用的依赖
这里使用到的依赖有：servlet、jsp、mysql驱动、jackon。
<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.9</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.0</version> </dependency>
这里，我直接在IDEA中写sql命令了，就不在Navicat中写了，创建完之后，我们回到Navicat中查看一下表的具体内容就可以了。
use springdb; 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 COMMENT '省会', 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,'江西','赣','南昌');
use springdb; set foreign_key_checks =0; drop table if exists `city`; create table `city` ( `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY , `name` varchar(255) DEFAULT NULL, `provinceid` int(11) DEFAULT NULL )ENGINE =InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET =utf8; insert into `city` values (1,'石家庄','1'); insert into `city` values (2,'保定','1'); insert into `city` values (3,'张家口','1'); insert into `city` values (4,'南昌','9'); insert into `city` values (5,'九江','9'); insert into `city` values (6,'洛阳','4'); insert into `city` values (7,'驻马店','4'); insert into `city` values (8,'开封','4'); insert into `city` values (9,'太原','2'); insert into `city` values (10,'大同','2');
上面两段代码，分别在springdb这个数据库中，创建了两个表（province、city），在Navicat中可以看到结果：👇👇👇
2.4 写一个实体类Province
package com.songzihao.entity; /** * */ public class Province { private Integer id; private String name; private String jiancheng; private String shenghui; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getJiancheng() { return jiancheng; } public void setJiancheng(String jiancheng) { this.jiancheng = jiancheng; } public String getShenghui() { return shenghui; } public void setShenghui(String shenghui) { this.shenghui = shenghui; } }
package com.songzihao.dao; import com.songzihao.entity.Province; import java.sql.*; /** * */ public class ProvinceDao { //查询省份对象 public Province queryProvinceName(Integer provinceId){ String url="jdbc:mysql://localhost:3306/springdb?useUnicode=true&characterEncoding=utf-8"; String username="root"; String password="12345678"; Connection conn=null; PreparedStatement pst=null; ResultSet rs=null; Province province=null; try { Class.forName("com.mysql.jdbc.Driver"); conn= DriverManager.getConnection(url,username,password); String sql="select * from province where id=?"; pst=conn.prepareStatement(sql); pst.setInt(1,provinceId); rs=pst.executeQuery(); if(rs.next()) { province=new Province(); province.setId(rs.getInt("id")); province.setName(rs.getString("name")); province.setJiancheng(rs.getString("jiancheng")); province.setShenghui(rs.getString("shenghui")); } }catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); }finally { try { if(rs!=null) { rs.close(); } if(pst!=null) { pst.close(); } if(conn!=null) { conn.close(); } }catch (SQLException e) { e.printStackTrace(); } } return province; } }
package com.songzihao.controller; import com.fasterxml.jackson.databind.ObjectMapper; import com.songzihao.dao.ProvinceDao; import com.songzihao.entity.Province; import javax.servlet.*; import javax.servlet.http.*; import java.io.IOException; import java.io.PrintWriter; public class QueryProvinceNameServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //接收请求参数 String strProid=request.getParameter("proid"); String json=""; if(strProid!=null && !strProid.equals("")) { ProvinceDao dao=new ProvinceDao(); Province province=dao.queryProvinceName(Integer.valueOf(strProid)); //把对象转为json，才能通过HttpServletResponse输出 if(province!=null) { ObjectMapper om=new ObjectMapper(); json=om.writeValueAsString(province); } } System.out.println("province转为json=====" + json); //输出数据，响应ajax请求 response.setContentType("text/html;charset=utf-8"); PrintWriter pw=response.getWriter(); pw.println(json); pw.flush(); pw.close(); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <servlet> <servlet-name>QueryProvinceNameServlet</servlet-name> <servlet-class>com.songzihao.controller.QueryProvinceNameServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>QueryProvinceNameServlet</servlet-name> <url-pattern>/query</url-pattern> </servlet-mapping> </web-app>
<%@ page contentType="text/html;charset=utf-8" language="java" %> <html> <head> <title>使用ajax查询省份名称</title> <script type="text/javascript"> function search() { //1.创建异步对象 var xhr=new XMLHttpRequest(); //2.绑定事件 xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status==200) { //获取数据 var data=xhr.responseText; //将json格式的字符串转为json对象 var obj=JSON.parse(data); //更新数据 document.getElementById("proname").value=obj.name; document.getElementById("projiancheng").value=obj.jiancheng; document.getElementById("proshenghui").value=obj.shenghui; } } //3..初始请求参数 var proid = document.getElementById("proid").value; xhr.open("get","query?proid=" + proid,true); //4.发起请求 xhr.send(); } </script> </head> <body> <div align="center"> <p>根据id查询省份的全部信息</p> <table> <tr> <td>省份id：</td> <td><input type="text" id="proid"></td> </tr> <tr> <td>省份名称：</td> <td><input type="text" id="proname"></td> </tr> <tr> <td>省份简称：</td> <td><input type="text" id="projiancheng"></td> </tr> <tr> <td>省份省会：</td> <td><input type="text" id="proshenghui"></td> </tr> <tr> <td>操作：</td> <td><input type="button" value="查询" onclick="search()"></td> </tr> </table> </div> </body> </html>
