JSON数据格式（重要）JavaScript Object Notation缩写?
定义：是一种轻量级的数据交换格式?
特点：?
1、易于程序员阅读和编写。
2、易于计算机解析和生成。
3、其实是javascript的子集：原生javascript支持JSON
JSON有两种结构：
1、对象格式：{"key1"：obj1, "key2":obj2, "key3":obj3...}
2、数组/集合格式: [obj1,obj2,obj3...]
注意：JSON的key是字符串，JSON的value是Object
规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4） 并列数据的集合（数组）用方括号(“[]”)表示。
? ?? [
? ? ? ? {名称1:值,名称2:值2},
? ? ? ? {名称1:值,名称2:值2}
? ?? ]
Jquery的Ajax技术（重点）
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操????作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中????经常使用的有三种
1）$.get(url, [data], [callback], [type]) ?后面三个是可选的可以没有
2）$.post(url, [data], [callback], [type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
3）$.ajax(?{?option1:value1,option2:value2...?}?);?
常用的option有如下：
async：是否异步，默认是true代表异步。（get/post方式只能异步，不能配置）
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
?前端构建
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
省份：
<select id="provinceId" onchange="selectCity(this)">
<option>---请选择--</option>
</select>
城市:
<select id="cityId" onchange="selectArea(this)">
<option>---请选择--</option>
</select>
区县:
<select id="areaId">
<option>---请选择--</option>
</select>
<script src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$.post(
'<%=request.getContextPath()%>/area?method=selectProvince',
function(jsonObj) {
console.log(jsonObj);
// [{id: 110000, province: "北京市"},{id: 150000, province: "内蒙古自治区"}]
$(jsonObj).each(function() {
// <option value="001">山东省</option>
// this
$('#provinceId').append('<option value="'+this.id+'">'+this.province+'</option>');
});
},
'json'
);
});
function selectCity(obj) {
console.log(obj);
var provinceId = $(obj).val();
$.post(
'<%=request.getContextPath()%>/area?method=selectCity',
{'provinceId': provinceId},
function(jsonObj) {
console.log(jsonObj);
$('#cityId option:gt(0)').remove();
$(jsonObj).each(function() {
// <option value="001">山东省</option>
// this
$('#cityId').append('<option value="'+this.id+'">'+this.city+'</option>');
});
},
'json'
);
}
function selectArea(obj) {
console.log(obj);
var cityId = $(obj).val();
$.post(
'<%=request.getContextPath()%>/area?method=selectArea',
{'cityId': cityId},
function(jsonObj) {
console.log(jsonObj);
$('#areaId option:gt(0)').remove();
$(jsonObj).each(function() {
// <option value="001">山东省</option>
// this
$('#areaId').append('<option value="'+this.id+'">'+this.area+'</option>');
});
},
'json'
);
}
</script>
</body>
</html>servlet部分
@WebServlet("/area")
public class AreaServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String method = req.getParameter("method");
switch (method){
case "selectProvince":
selectProvince(req, resp);
break;
case "selectCity":
selectCity(req, resp);
break;
case "selectArea":
selectArea(req, resp);
}
}
private void selectArea(HttpServletRequest req, HttpServletResponse resp) {
String cityId = req.getParameter("cityId");
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
ArrayList<Area> list = new ArrayList<>();
try {
connection = JDBCUtil.getConnection();
String sql = "select id,area from tm_area where city_id=?";
statement = connection.prepareStatement(sql);
statement.setInt(1, Integer.parseInt(cityId));
System.out.println(statement);
resultSet = statement.executeQuery();
while (resultSet.next()) {
int id = resultSet.getInt("id");
String area = resultSet.getString("area");
Area a = new Area(id, area);
list.add(a);
}
for (Area area : list) {
System.out.println(area);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
JDBCUtil.close(connection, statement, resultSet);
}
// {} []
JSONUtil.array2Json(list, resp);
}
private void selectCity(HttpServletRequest req, HttpServletResponse resp) {
System.out.println("AreaServlet.selectCity");
String provinceId = req.getParameter("provinceId");
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
ArrayList<City> list = new ArrayList<>();
try {
connection = JDBCUtil.getConnection();
String sql = "select id,city from tm_city where province_id=?";
statement = connection.prepareStatement(sql);
statement.setInt(1, Integer.parseInt(provinceId));
System.out.println(statement);
resultSet = statement.executeQuery();
while (resultSet.next()) {
int id = resultSet.getInt("id");
String city = resultSet.getString("city");
City c = new City(id, city);
list.add(c);
}
for (City city : list) {
System.out.println(city);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
JDBCUtil.close(connection, statement, resultSet);
}
// {} []
JSONUtil.array2Json(list, resp);
}
private void selectProvince(HttpServletRequest req, HttpServletResponse resp) {
System.out.println("AreaServlet.selectProvince");
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
ArrayList<Province> list = new ArrayList<>();
try {
connection = JDBCUtil.getConnection();
String sql = "select id,province from tm_province";
statement = connection.prepareStatement(sql);
System.out.println(statement);
resultSet = statement.executeQuery();
while (resultSet.next()) {
int id = resultSet.getInt("id");
String province = resultSet.getString("province");
Province p = new Province(id, province);
list.add(p);
}
for (Province province : list) {
System.out.println(province);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
JDBCUtil.close(connection, statement, resultSet);
}
// {} []
JSONUtil.array2Json(list, resp);
}
}省略province-city-area类的封装代码