使用JQuery實現省市聯動
阿新 • • 發佈：2018-11-03
使用JQuery實現省市聯動
環境準備
1.準備資料庫
2.準備頁面
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/city.js"></script> </head> <body> 省份: <select name="province" id ="province"> <option value="" >-請選擇 - <option value="1" >廣東 <option value="2" >湖南 <option value="3" >湖北 <option value="4" >四川 </select> 城市: <select name="city" id="city"> <option value="" >-請選擇 - </select> </body>
XStream的使用
//3. 返回資料。手動拼 ---> XStream 轉化 bean物件成 xml
XStream xStream = new XStream();
//想把id做成屬性
xStream.useAttributeFor(CityBean.class, "id");
//設定別名
xStream.alias("city", CityBean.class);
//轉化一個物件成xml字串
String xml = xStream.toXML(list);
JS程式碼
$(function() { //1。找到省份的元素 $("#province").change(function() { //2. 一旦裡面的值發生了改變，那麼就去請求該省份的城市資料 //$("#province").varl(); var pid = $(this).val(); /*<list> <city> <id>1<id> <pid>1</pid> <cname>深圳</cname> </city> <city > <id>2<id> <pid>1</pid> <cname>東莞</cname> </city> </list>*/ $.post( "CityServlet",{pid:pid} ,function(data,status){ //alert("回來資料了:"+data); //先清空以前的值： $("#city").html("<option value='' >-請選擇-") //遍歷： //從data資料裡面找出所有的city ， 然後遍歷所有的city。 //遍歷一個city，就執行一次function方法 $(data).find("city").each(function() { //遍歷出來的每一個city，取它的孩子。 id , cname var id = $(this).children("id").text(); var cname = $(this).children("cname").text(); $("#city").append("<option value='"+id+"' >"+cname) }); } ); }); });
伺服器和客戶端資料傳輸的方式
- xml
<list> <city> <id>1<id> <pid>1</pid> <cname>深圳</cname> </city> <city > <id>2<id> <pid>1</pid> <cname>東莞</cname> </city> </list>
-
json
閱讀性更好 、 容量更小。
{"name":"aaa" , "age":19} 把javaBean 轉化成 json資料 //3. 把list ---> json資料 //JSONArray ---> 變成陣列 ， 集合 [] //JSONObject ---> 變成簡單的資料 { name : zhangsan , age:18} JSONArray jsonArray = JSONArray.fromObject(list); String json = jsonArray.toString();
使用json格式資料顯示省市聯動效果
serlvet程式碼：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1. 獲取引數
int pid = Integer.parseInt(request.getParameter("pid"));
//2 找出所有的城市
CityDao dao = new CityDaoImpl();
List<CityBean> list = dao.findCity(pid);
//3. 把list ---> json資料
//JSONArray ---> 變成陣列 ， 集合 []
//JSONObject ---> 變成簡單的資料 { name : zhangsan , age:18}
JSONArray jsonArray = JSONArray.fromObject(list);
String json = jsonArray.toString();
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
};
}
js程式碼
$(function() {
//1。找到省份的元素
$("#province").change(function() {
//2. 一旦裡面的值發生了改變，那麼就去請求該省份的城市資料
//$("#province").varl();
var pid = $(this).val();
/*[
{
"cname": "深圳",
"id": 1,
"pid": 1
},
{
"cname": "東莞",
"id": 2,
"pid": 1
}
...
]*/
$.post( "CityServlet02",{pid:pid} ,function(data,status){
//先清空
$("#city").html("<option value='' >-請選擇-");
//再遍歷，追加
$(data).each(function(index , c) {
$("#city").append("<option value='"+c.id+"' >"+c.cname)
});
},"json" );
});
});