XML與JSON的格式資料,實現 省市聯動
阿新 • • 發佈:2018-12-19
1,XML
後臺設定響應格式:response.setContentType("text/xml;charset=GBK");
/* * xml格式 * <citys> <city id="1"> <pid>2</pid> <cname>長沙</cname> </city> <city id="2"> <pid>2</pid> <cname>常德</cname> </city> <city id="3"> <pid>2</pid> <cname>岳陽</cname> </city> </citys> */ $(function(){ $("#ProvinceSelect").change(function(){ var province = $(this).val(); $.post("DemoServlet01",{"pid":province},function(data,status){ //清空下拉列表 $("#citySelect").html("<option value='' >-請選擇 -"); //遍歷: //從data資料裡面找出所有的city , 然後遍歷所有的city。 //遍歷一個city,就執行一次function方法 $(data).find("city").each(function(){ var id = $(this).attr("id"); var cname = $(this).children("cname").text(); $("#citySelect").append("<option value='"+id+"'>"+cname); }); }); }); });
2,JSON
後臺設定響應格式:response.setContentType("text/html;charset=GBK");
注意:不是 text/json
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("GBK"); response.setContentType("text/html;charset=GBK"); String pid = request.getParameter("pid"); QueryRunner qr = new QueryRunner(C3P0Util.getDataSource()); try { List<CityBean> citys = qr.query("select * from city where pid = ?", new BeanListHandler<CityBean>(CityBean.class),pid); // 把list ---> json資料 //JSONArray ---> 變成陣列 , 集合 [] //JSONObject ---> 變成簡單的資料 { name : zhangsan , age:18} JSONArray jsonArray = JSONArray.fromObject(citys); String json = jsonArray.toString(); response.getWriter().write(json); } catch (SQLException e) { e.printStackTrace(); } }
$(function(){ $("#ProvinceSelect").change(function(){ var pid = $("#ProvinceSelect").val(); $.post("DemoServlet01",{"pid":pid},function(data,status){ $("#citySelect").html("<option value='' >-請選擇 -"); var json = JSON.parse(data); for(x in json){ $("#citySelect").append("<option value='"+json[x].id+"' >"+json[x].cname); } }); }); });
如果,前端獲取不到JSON的資料,則