Json、Ajax---省市区三级联动
JSON
JSON有两种格式：对象和数组
对象
整体用大括号， “ key ” 值用双引号，key值和value值之间用 “ ：” 连接，并列的数据之间用 “ ， ” 隔开。
Object{ "key1" : obj1 ,
"key2" : obj2
}
Student：
{
"id" : 12,
"name" : "java1711",
"age" : 20,
"gender" : "男"
}
数组
整体用方括号，具体对象用大括号，“ key ” 值用双引号，key值和value值之间用 “ ：” 连接，并列的数据之间用 “ ， ” 隔开。
List<Object>: [{},{}]
List<Student>:
[
{
"id" : 12,
"name" : "java1711",
"age" : 20,
"gender" : "男"
}
,
{
"id" : 13,
"name" : "java1712",
"age" : 21,
"gender" : "女"
}
]
Ajax
最大特点：异步请求，不刷新整个页面，只刷新局部也叫局部刷新。
什么是同步，什么是异步
**同步：**客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态
你现在传输，我要亲眼看着你传输完成，才去做别的事。
**异步：**客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死
你传输吧，我去做我的事了，你传输完了告诉我一声。
Jquery的Ajax技术
对js原生的ajax进行了封装，开发中经常使用的有三种：
get和post
$.get(url, [data], [callback], [type])
$.post(url, [data], [callback], [type])
其中：
中括号表示可有可无
- url：代表请求的服务器端地址，必须有
- data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
- callback：回调函数，表示服务器端成功响应所触发的函数
- type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换） 常用的返回类型：text、json、html等
ajax
$.ajax( { option1:value1,option2:value2... } );
常用的option有如下：
- async：是否异步，默认是true代表异步。（get/post方式只能异步，不能配置）
- type：请求方式，POST/GET（常用post）
- url：请求服务器端地址 data：发送到服务器的参数，建议使用json格式
- success：成功响应执行的函数，对应的类型是function类型
- dataType：服务器端返回的数据类型，常用text和json
实例-省市区三级联动
基本思路
1.配置页面
对于页面所需要的数据有两种获得方法：servlet 拿到数据集合然后 for 循环进行遍历（只有省份可以）或者servlet 拿到数据集合之后直接访问jsp发送ajax请求，然后用jQuery的append进行拼接。
2.先查找省份
通过servlet查出封装成集合，然后转化成JSON格式的数组。因为JSON只有两种结构：对象和数组。所以有专门的工具类可以直接将list转化成JSON格式的 { } 或 [ ] 。
3.绑定相应的市、区
用事件 onchage ，即当发生改变时会触发，这里有一个隐藏的this，this相当于option的dom对象
4.清理
将在发送ajax之前将之前的数据清理掉 以防影响体验。
代码
jsp文件代码
<%@ 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(
<%-- url--%>
'<%=request.getContextPath()%>/address?method=selectProvince',
<%-- callback--%>
function(jsonObj){
console.log(jsonObj);
$(jsonObj).each(function(){
$('#provinceId').append('<option value="'+this.id+'">' + this.provinceName + '</option>');
});
},
<%-- type--%>
'json'
);
});
function selectCity(obj){
console.log(obj);
var provinceId = $(obj).val();
$.post(
'<%=request.getContextPath()%>/address?method=selectCity',
{'provinceId' : provinceId},
function(jsonObj){
console.log(jsonObj);
$('#cityId option:gt(0)').remove;
$(jsonObj).each(function(){
$('#cityId').append('<option value="'+this.id+'">' + this.cityName + '</option>');
});
},
'json'
);
}
function selectArea(obj){
console.log(obj);
var cityId = $(obj).val();
$.post(
'<%=request.getContextPath()%>/address?method=selectArea',
{'cityId' : cityId},
function(jsonObj){
console.log(jsonObj);
$('#areaId option:gt(0)').remove;
$(jsonObj).each(function(){
$('#areaId').append('<option value="'+this.id+'">' + this.areaName + '</option>');
});
},
'json'
);
}
</script>
</body>
</html>
servlet代码
@WebServlet("/address")
public class AddrServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("AddrServlet.service");
String method = req.getParameter("method");
switch (method){
case "selectProvince":
selectProvince(req,resp);
break;
case "selectCity":
selectCity(req,resp);
break;
case "selectArea":
selectArea(req,resp);
break;
}
}
private void selectArea(HttpServletRequest req, HttpServletResponse resp) {
System.out.println("AddrServlet.selectArea");
int cityId = Integer.parseInt(req.getParameter("cityId"));
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
ArrayList<Area> list = new ArrayList<>();
try {
connection = JDBCUtil.getConnection();
String sql = "select id, area from tm_area where city_id=?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1,cityId);
System.out.println(preparedStatement);
resultSet = preparedStatement.executeQuery();
while (resultSet.next()){
int id = resultSet.getInt("id");
String areaName = resultSet.getString("area");
Area area = new Area(id, areaName);
list.add(area);
}
for (Area area : list) {
System.out.println(area);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally {
JDBCUtil.close(connection,preparedStatement,resultSet);
}
JSONUtil.array2Json(list, resp);
}
private void selectCity(HttpServletRequest req, HttpServletResponse resp) {
System.out.println("AddrServlet.selectCity");
int provinceId = Integer.parseInt(req.getParameter("provinceId"));
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
ArrayList<City> list = new ArrayList<>();
try {
connection = JDBCUtil.getConnection();
String sql = "select id, city from tm_city where province_id=?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1,provinceId);
System.out.println(preparedStatement);
resultSet = preparedStatement.executeQuery();
while (resultSet.next()){
int id = resultSet.getInt("id");
String cityName = resultSet.getString("city");
City city = new City(id,cityName);
list.add(city);
}
for (City city : list) {
System.out.println(city);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally {
JDBCUtil.close(connection,preparedStatement,resultSet);
}
JSONUtil.array2Json(list, resp);
}
private void selectProvince(HttpServletRequest req, HttpServletResponse resp) {
System.out.println("AddrServlet.selectProvince");
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
ArrayList<Province> list = new ArrayList<>();
try {
connection = JDBCUtil.getConnection();
String sql = "select id, province from tm_province";
preparedStatement = connection.prepareStatement(sql);
System.out.println(preparedStatement);
resultSet = preparedStatement.executeQuery();
// System.out.println("ok");
while (resultSet.next()){
int id = resultSet.getInt("id");
String provinceName = resultSet.getString("province");
Province province = new Province(id, provinceName);
list.add(province);
}
for (Province province : list) {
System.out.println(province);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}finally {
JDBCUtil.close(connection,preparedStatement,resultSet);
}
JSONUtil.array2Json(list, resp);
}
}
1312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
