标签：coding pen ajax 解析 map end jquer innerhtml oct
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ajax json jquery 菜单案例</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px } </style> <link rel="stylesheet" type="text/css" href="../css/style.css" /> <script src="../js/jquery-2.1.1.min.js" type="text/javascript"></script> </head> <body> <select name="first" id="first" style="width:160px"> <option value="0">---请选择---</option> <option value="1">中国</option> <option value="2">美国</option> <option value="3">英国</option> </select> <select name="second" id="second" size="3" style="width:160px"></select> <script type="text/javascript"> $(function() { $("#first").change(function() { id=document.getElementById("first").value; $.ajax({ url : "../jsp/second2.jsp", dataType : "json", data:"id="+id, success : function(data) { var cttylist=eval(data); var seconddd = document.getElementById("second"); seconddd.innerHTML=null; for ( var i = 0; i < cttylist.length; i++) { var op = document.createElement("option"); op.innerHTML = cttylist[i].name; seconddd.appendChild(op); } }, error : function(data) { alert(data); } }); }); }); </script> </body> </html>
jsp
<%@ page language="java" import="java.util.*,com.sy.City,com.sy.CityService,net.sf.json.JSONArray" pageEncoding="ISO-8859-1"%> <% //接受传过来的数据 String strid=(String)request.getParameter("id"); Integer id=Integer.parseInt(strid); //根据id获得书名列表 List<City> citylist=new CityService().getCityByCategory(id); //设置传输编码 response.setContentType("text/html;charset=UTF-8"); //将json解析后输出到前台 out.println(JSONArray.fromObject(citylist)); %>
java City.java
package com.sy; public class City { Integer cid; String cname; public Integer getId() { return cid; } public void setId(Integer id) { this.cid = id; } public String getName() { return cname; } public void setName(String cname) { this.cname = cname; } public City(Integer cid, String cname) { super(); this.cid = cid; this.cname = cname; } }
java CityService.java
package com.sy; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class CityService { static Map<Integer , List<City>> CityDb = new HashMap<Integer , List<City>>(); static { List<City> list1 = new ArrayList<City>(); List<City> list2 = new ArrayList<City>(); List<City> list3 = new ArrayList<City>(); list1.add(new City(1 , "山东")); list1.add(new City(1 , "北京")); list1.add(new City(1 , "上海")); list2.add(new City(2 , "美1")); list2.add(new City(2 , "美2")); list3.add(new City(3 , "英1")); list3.add(new City(3 , "英2")); list3.add(new City(3 , "英3")); CityDb.put(1 , list1); CityDb.put(2 , list2); CityDb.put(3 , list3); } public List<City> getCityByCategory(int categoryId) { return CityDb.get(categoryId); } }
标签：coding pen ajax 解析 map end jquer innerhtml oct
原文地址：http://www.cnblogs.com/excellencesy/p/7905589.html
