jquery實現省市聯動的兩種方式（xml，，，json）
阿新 • • 發佈：2018-12-09
省市聯動，xml傳值方式
匯入相應的jar
建立表單
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 建立js
//標準格式不解釋
$(function() {
//建立事件，當該標籤的值被改變時事件被觸發 建立servlet，dao
try {
request.setCharacterEncoding("UTF-8");
int pid=Integer.parseInt(request.getParameter("pid"));
checkdao c=new checkImpl();
List<city> list = c.findcity(pid);
//建立XStream工具類的物件
XStream xs=new XStream();
//自己手動設定轉化成xml後的標籤的名字，預設為類的全路徑
xs.alias("city", city.class);
//將資料轉換為xml
String xml = xs.toXML(list);
System.out.println(xml);
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(xml);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}省市聯動，json傳值方式
匯入相應的jar
建立表單
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
//這是json資料的js
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/cityjson.js"></script>
</head>
<body>
<select id="vv">
<option >--請選擇--</option>
<option value="1">--河南--</option>
<option value="2">--蘇州--</option>
<option value="3" >--廣東--</option>
</select>
<select id="c">
<option >--請選擇--</option>
</select>
</body>
</html>建立js
//格式化東西
$(function(){
//監聽標籤，當其值被改變的時被觸發執行function
$("#vv").change(function() {
var pid=$(this).val();
//建立post請求，傳值pid，執行事件function，data表示servlet傳過來的值
$.post("/checkUsername/jsonservlet",{pid:pid},function(data,status){
//寫html資料到城市下來列表框，因為寫資料用的時追加，所以在每一次切換的時候需要對資料進行重置
$("#c").html("<option value='' >--check--");
//遍歷data資料執行function，，i表示下標，，，c表示遍歷收到的資料
$(data).each(function(i,c) {
//將值寫入下拉標籤
$("#c").append("<option value='"+c.pid+"'>"+c.cname);
});
//需要手動加上json，不然不識別。
},"json");
});
});建立servlet，dao
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
int pid=Integer.parseInt(request.getParameter("pid"));
checkdao c=new checkImpl();
List<city> list = c.findcity(pid);
JSONArray ja=JSONArray.fromObject(list);
String json = ja.toString();
System.out.println(json);
response.setContentType("text/xml;charset=utf-8");
response.getWriter().write(json);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}