将Ajax得到的数据使用json数据格式输出
1、项目清单
2、代码
2.1、Procince类代码
package com.bjpowernode.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;
}
}
2.2、ProvinceDao类代码
package com.bjpowernode.dao;
import com.bjpowernode.entity.Province;
import java.sql.*;
//使用jdbc访问数据库
public class ProvinceDao {
//根据id获取名称
public String queryProviceNameById(Integer proviceId){
//声明变量
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
String sql= "";
//定义参数
String url="jdbc:mysql://localhost:3306/springdb";
String username="root";
String password="123456";
//连接数据库
String name = "";
//加载驱动
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,username,password);
//创建PreparedStatement
sql="select name from province where id=?";
pst = conn.prepareStatement(sql);
//设置参数值
pst.setInt(1,proviceId);
//执行sql
rs = pst.executeQuery();
//遍历rs
/*while(rs.next()){ //当你的rs中有多余一条记录时。
name = rs.getString("name");
}*/
if( rs.next()){
name =rs.getString("name");
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
} finally {
try{
if( rs != null){
rs.close();
}
if( pst != null){
pst.close();
}
if( conn != null){
conn.close();
}
}catch(Exception e){
e.printStackTrace();
}
}
return name;
}
//根据id获取一个完整的Province对象
public Province queryProviceById(Integer proviceId){
Connection conn = null;
PreparedStatement pst = null;
ResultSet rs = null;
String sql= "";
String url="jdbc:mysql://localhost:3306/springdb";
String username="root";
String password="123456";
Province province = null;
//加载驱动
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,username,password);
//创建PreparedStatement
sql="select id, name, jiancheng, shenghui from province where id=?";
pst = conn.prepareStatement(sql);
//设置参数值,sql语句中有占位符,这里的1是指sql语句的第一个占位符,并传入参数provinceId
pst.setInt(1,proviceId);
//执行sql
rs = pst.executeQuery();
//遍历rs
/*while(rs.next()){ //当你的rs中有多余一条记录时。
name = rs.getString("name");
}*/
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(Exception e){
e.printStackTrace();
}
}
return province;
}
}
2.3、QueryJsonServlet类代码
package com.bjpowernode.controller;
import com.bjpowernode.dao.ProvinceDao;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class QueryJsonServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//默认值, {} :表示json格式的数据
String json = "{}";
// 获取请求参数,省份的id
String strProid = request.getParameter("proid");
System.out.println("strProid========="+strProid);
//判断proid有值时,调用dao查询数据
if( strProid != null && strProid.trim().length() > 0 ){
ProvinceDao dao = new ProvinceDao();
Province p = dao.queryProviceById(Integer.valueOf(strProid));
//需要使用jackson 把 Provice对象转为 json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(p);
}
//把获取的数据,通过网络传给ajax中的异步对象,响应结果数据
//指定服务器端(servlet)返回给浏览器的是json格式的数据,json数据使用utf-8编码的
//response.setContentType("text/json;charset=utf-8");
response.setContentType("application/json;charset=utf-8");
PrintWriter pw = response.getWriter();
/**
* <provines>
* <province>
* <name>河北</name>
* <shenghui>石家庄</shenghui>
* </province>
* <province>
* <name>山西</name>
* <shenghui>太原</shenghui>
* </province>
* </provines>
*/
pw.println(json); //输出数据---会付给ajax中 responseText属性
pw.flush();
pw.close();
}
}
2.4、TestJson类代码
package com.bjpowernode;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class TestJson {
public static void main(String[] args) throws JsonProcessingException {
// 使用jackson 把java对象转为json格式的字符串
Province p = new Province();
p.setId(1);
p.setName("河北");
p.setJiancheng("冀");
p.setShenghui("石家庄");
//使用jackson 把 p 转为 json
ObjectMapper om = new ObjectMapper();
// writeValueAsString:把参数的java对象转为json格式的字符串
String json = om.writeValueAsString(p);
System.out.println("转换的json=="+json);
}
}
2.5、myajax.jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用json格式的数据</title>
<script type="text/javascript">
function doSearch() {
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function() {
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText;
//eval是执行括号中的代码, 把json字符串转为json对象
var jsonobj = eval("(" + data + ")");
//更新dom对象
callback(jsonobj);
}
}
//3.初始异步对象的请求参数
var proid = document.getElementById("proid").value;
// true :异步处理请求。 使用异步对象发起请求后,不用等待数据处理完毕,就可以执行其它的操作。
// false:同步,异步对象必须处理完成请求,从服务器端获取数据后,才能执行send之后的代码。 任意时刻只能执行一个异步请求。
xmlHttp.open("get","queryjson?proid="+proid,false);
//4.发送请求
xmlHttp.send();
//也可以创建其它的 XMLHttpRequest, 发送其它的请求处理。
alert("====在send之后的代码====")
}
//定义函数,处理服务器端返回的数据
function callback(json){
document.getElementById("proname").value = json.name;
document.getElementById("projiancheng").value=json.jiancheng;
document.getElementById("proshenghui").value= json.shenghui;
}
</script>
</head>
<body>
<p>ajax请求使用json格式的数据</p>
<table>
<tr>
<td>省份编号:</td>
<td><input type="text" id="proid">
<input type="button" value="搜索" onclick="doSearch()">
</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>
</table>
</body>
</html>
2.6、web.xml文件代码
<?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>
<servlet-name>QueryProvice</servlet-name>
<servlet-class>com.bjpowernode.controller.QueryProviceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryProvice</servlet-name>
<url-pattern>/queryProvice</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>QueryJsonServlet</servlet-name>
<servlet-class>com.bjpowernode.controller.QueryJsonServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>QueryJsonServlet</servlet-name>
<url-pattern>/queryjson</url-pattern>
</servlet-mapping>
</web-app>
3、笔记
-
代码运行的底层逻辑:首先.jsp页面的doserch()方法中执行ajax的四个步骤,发送请求后, QueryJsonServlet 文件接收到请求后,获取请求参数(省份的id),然后实例化ProvinceDao的对象通过对象dao.queryProviceById()方法来访问数据库根据参数(省份的id)来获取相应的值,此处的sql语句是搜索id, name, jiancheng, shenghui的值,在数据库找到对应的数据后赋值给province的对象,注意queryProviceById方法的返回值是province,所以最终返回的是赋完值的province对象。QueryJsonServlet类得到返回的province对象后又赋值给Province 对象 p,然后需要使用jackson 把 Provice对象里p转为 json类型的字符串(json是json格式的数据,前面已经定义),把获取的数据通过网络传给ajax中的异步对象响应结果数据,同时还要指定服务器端(servlet)返回给浏览器的是json格式的数据,json数据是使用utf-8编码的。在myajax.jsp页面得到Servlet传过来的json字符串后再将其转换成json对象后输出。
-
使用json好处是因为json格式的数据是以键值对(key:value)的形式表现的,由于从数据库返回的是一大串字符串,使用xml格式来处理这一大串字符串会比用json格式麻烦很多,因此json格式的数据应用比较广泛。
-
json分类:
1、json对象 ,JSONObject ,这种对象的格式 名称:值, 也可以看做是 key:value 格式。
2、json数组, JSONArray, 基本格式:
[{ name:“河北”, jiancheng:“冀”,“shenghui”:“石家庄”} , { name:“山西”, jiancheng:“晋”,“shenghui”:“太原”} ] -
在js中的,可以把json格式的字符串,转为json对象, json中的key,就是json对象的属性名。
-
为什么要使用json :
- json格式好理解
- json格式数据在多种语言中,比较容易处理。 使用java, javascript读写json格式的数据比较容易。
- json格式数据他占用的空间下,在网络中传输快, 用户的体验好。
- 为什么要使用json :
- json格式好理解
- json格式数据在多种语言中,比较容易处理。 使用java, javascript读写json格式的数据比较容易。
- json格式数据他占用的空间下,在网络中传输快, 用户的体验好