本次项目结构如下:
使用到的工具如下:
1.index.jsp代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function search(){
//创建ajax异步对象
var xmlHttp =new XMLHttpRequest();
//绑定事件
xmlHttp.onreadystatechange = function () {
if( xmlHttp.readyState == 4 && xmlHttp.status== 200){
alert("返回值是:"+xmlHttp.responseText);
//更新页面,就是更新dom对象
var data = xmlHttp.responseText;
// eval(): 是用于将一个 JSON 字符串转换为 JavaScript 对象
var json = eval("(" + data + ")");
document.getElementById("proname").value = json.id;
document.getElementById("proname").value = json.name;
document.getElementById("proeasyname").value=json.easyname;
document.getElementById("procityname").value= json.city;
}
}
//初始化异步对象
var proid = document.getElementById("proid").value;
xmlHttp.open("get","queryProvice?proid="+proid,true);
//发送请求
xmlHttp.send();
}
</script>
<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>
<tr>
<td>省份简称:</td>
<td><input type="text" id="proeasyname" /></td>
</tr>
<tr>
<td>省会名称:</td>
<td><input type="text" id="procityname" /></td>
</tr>
</table>
</body>
</html>
解析 :
1.通过index.jsp发送请求到Servlet层进行业务处理
2.创建Ajax异步对象,绑定事件,通过readyState === 4判断请求是否完成,如果已完成,再根据status === 200判断是否是一个成功的响应。
3.将proid的值获取到,然后传入到Servlet层按照id进行查询相应的数据库数据。
4.将Servlet调用jdbc(Dao)层处理查询数据库的结果返回给index.jsp,用json的eval方法接受作为一个对象存储下来。
2.Dao层代码如下:
public class ProvinceDao {
public Province queryProviceNameById(Integer proviceId){
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
String sql = "";
Province province=null;
String url="jdbc:mysql://localhost:3306/info?useUnicode=true&characterEncoding=utf8";
String username="root";
String password="123456";
try {
Class.forName("com.mysql.jdbc.Driver");
conn=DriverManager.getConnection(url, username, password);
sql = "select id,name,jiancheng,shenghui from province where id=?";
pst= conn.prepareStatement(sql);
pst.setInt(1, proviceId);
rs = pst.executeQuery();
if(rs.next()) {
province=new Province();
province.setId(rs.getString("id"));
province.setName(rs.getString("name"));
province.setEasyname(rs.getString("jiancheng"));
province.setCity(rs.getString("shenghui"));
}
} 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 province;
}
}
解析:将获取到的结果集传递到实体层,调用set方法给成员变量传值。
3.base实体层代码如下:
public class Province {
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEasyname() {
return easyname;
}
public void setEasyname(String easyname) {
this.easyname = easyname;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
private String id;
private String name;
private String easyname;
private String city;
}
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 json="{}";
String strProid = request.getParameter("proid");
Province name=null;
System.out.println(strProid);
if(strProid !=null && !"".equals(strProid.trim())){
ProvinceDao dao = new ProvinceDao();
name =dao.queryProviceNameById(Integer.valueOf(strProid));
ObjectMapper om =new ObjectMapper();
json = om.writeValueAsString(name);
}
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(json);
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);
}
}
解析:
1.创建一个json的字符串,
2.创建一个name为Province的对象,用于接收查询结果,
3.创建一个om为ObjectMapper 的对象,调用writeValueAsString()方法,将结果放进json字符串中。
4.最后将结果返回给jsp页面
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', '江西', '赣', '南昌');