AJAX+Json+JDBC实现数据互动

最新推荐文章于 2023-08-31 16:38:29 发布

Litch_

最新推荐文章于 2023-08-31 16:38:29 发布

阅读量503

点赞数 2

文章标签： ajax jdbc json

本文链接：https://blog.csdn.net/Litch_/article/details/107332995

版权

本次项目结构如下：
在这里插入图片描述
使用到的工具如下：

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', '江西', '赣', '南昌');

6.测试

在这里插入图片描述

Litch_

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX+Json+JDBC实现数据互动

本次项目结构如下：使用到的工具如下：1.index.jsp代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><script type="text/javascript"> function search(){ //创建ajax异步对象 v
复制链接

扫一扫