AJAX与JSON的操作(JQuery)

 
  1. //addressList.html
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title>Insert title here</title>
  7. <script type="text/javascript" src="jquery1.2.js"></script>
  8. <script type="text/javascript">
  9. function searchPerson()
  10. {
  11.     var from=$('#from option[@selected]').text();
  12.     var to=$('#to option[@selected]').text();
  13.     $.getJSON("rec.jsp",{"from":from,"to":to},function(json){
  14.     //alert(json.addressBOOK[0].name);
  15.     $("#tableBody").html('');
  16.     $.map(json.addressBOOK,function(i){
  17.         //alert(i.name);
  18.         var html="<tr><td>"+i.name+"</td><td>"+i.address.street+"  "+i.address.city+"  "+i.address.zip+"</td><td>"+i.tel.tel1+"</td><td>"+"  "+i.tel.tel2+"</td></tr>";
  19.         $("#tableBody").append(html);
  20.     }); 
  21.     
  22.         });
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <div id="page">
  28. <select size=15 id="from" style="float:left" onChange="searchPerson()">
  29.     <option>A</option>
  30.     <option>B</option>
  31.     <option>C</option>
  32.     <option>D</option>
  33.     <option>E</option>
  34.     <option>F</option>
  35.     <option>G</option>
  36.     <option>H</option>
  37.     <option>I</option>
  38.     <option>J</option>
  39.     <option>K</option>
  40.     <option>L</option>
  41.     <option>M</option>
  42.     <option>N</option>
  43.     <option>O</option>
  44.     <option>P</option>
  45.     <option>Q</option>
  46.     <option>R</option>
  47.     <option>S</option>
  48.     <option>T</option>
  49.     <option>U</option>
  50.     <option>V</option>
  51.     <option>X</option>
  52.     <option>Y</option>
  53.     <option>Z</option>
  54. </select>
  55. <select size=15 id="to" style="float:left" onChange="searchPerson()">
  56.     <option>A</option>
  57.     <option>B</option>
  58.     <option>C</option>
  59.     <option>D</option>
  60.     <option>E</option>
  61.     <option>F</option>
  62.     <option>G</option>
  63.     <option>H</option>
  64.     <option>I</option>
  65.     <option>J</option>
  66.     <option>K</option>
  67.     <option>L</option>
  68.     <option>M</option>
  69.     <option>N</option>
  70.     <option>O</option>
  71.     <option>P</option>
  72.     <option>Q</option>
  73.     <option>R</option>
  74.     <option>S</option>
  75.     <option>T</option>
  76.     <option>U</option>
  77.     <option>V</option>
  78.     <option>X</option>
  79.     <option>Y</option>
  80.     <option>Z</option>
  81. </select>
  82. <div style="clear:both"></div>
  83. <div id="result">
  84. <table><thead><tr><td>姓名</td><td>地址</td><td>手机1</td><td>手机2</td></tr></thead>
  85. <tbody id="tableBody"></tbody>
  86. </table>
  87. </div>
  88. </div>
  89. </body>
  90. </html>
  1. //rec.jsp
  2. <%@ page import="java.util.*,org.json.*"%>
  3. <%
  4.  class Address {
  5.       private String street; 
  6.       private String city; 
  7.       private int zip;  
  8.       private String tel;  
  9.       private String telTwo;
  10.     public Address() {
  11.         // TODO Auto-generated constructor stub
  12.     }
  13.     public Address(String street, String city, int zip, String tel,
  14.             String telTwo) {
  15.         super();
  16.         this.street = street;
  17.         this.city = city;
  18.         this.zip = zip;
  19.         this.tel = tel;
  20.         this.telTwo = telTwo;
  21.     }
  22.     public String getStreet() {
  23.         return street;
  24.     }
  25.     public void setStreet(String street) {
  26.         this.street = street;
  27.     }
  28.     public String getCity() {
  29.         return city;
  30.     }
  31.     public void setCity(String city) {
  32.         this.city = city;
  33.     }
  34.     public int getZip() {
  35.         return zip;
  36.     }
  37.     public void setZip(int zip) {
  38.         this.zip = zip;
  39.     }
  40.     public String getTel() {
  41.         return tel;
  42.     }
  43.     public void setTel(String tel) {
  44.         this.tel = tel;
  45.     }
  46.     public String getTelTwo() {
  47.         return telTwo;
  48.     }
  49.     public void setTelTwo(String telTwo) {
  50.         this.telTwo = telTwo;
  51.     }
  52. }
  53.     SortedMap addressBook=new TreeMap();
  54.     Address cyhgo=new Address("5 Main Street","San Diego, CA",91912,"619-332-3452","664-223-4667");
  55.     addressBook.put("cyhgo",cyhgo);
  56.     Address amySmith = new Address("25 H Street","Los Angeles, CA",95212,"660-332-3452","541-223-4667"); 
  57.     addressBook.put("Sally May",amySmith);
  58.     Address johnKim = new Address("2343 Sugarland Drive","Houston, TX",55212,"554-332-3412","461-223-4667"); 
  59.     addressBook.put("John Kim",johnKim);
  60.     Address richardThorn = new Address("14 68th Street","New York, NY",12452,"212-132-6182","161-923-4001"); 
  61.     addressBook.put("Richard Thorn",richardThorn);
  62.     Address annMichaels = new Address("P.O BOX 54534","Seattle, WA",42452,"561-832-3180","531-133-9098"); 
  63.     addressBook.put("Ann Michaels",annMichaels);
  64.     Address georgeLee = new Address("131 Peach Drive","Atlanta, GA",32452,"123-722-3783","131-733-0084"); 
  65.     addressBook.put("George Lee",georgeLee);
  66.     Address bettyCarter = new Address("53 Mullholand Drive","Miami, FL",72452,"541-322-1723","546-338-1100"); 
  67.     addressBook.put("Betty Carter",bettyCarter);
  68.     Address normanTate = new Address("P.O BOX 13231","Portland, OR",52452,"341-122-0923","146-998-1172"); 
  69.     addressBook.put("Norman Tate",normanTate);
  70.     Address dennisWong = new Address("333 Harbour Drive","Miami, FL",74452,"521-122-8623","576-229-1234"); 
  71.     addressBook.put("Dennis Wong",dennisWong);
  72.     Address jackieBennet = new Address("9 Orchard Way","Cincinnati, OH",82452,"141-717-9921","172-638-01722"); 
  73.     addressBook.put("Jackie Bennett",jackieBennet);
  74.     
  75.     String from=request.getParameter("from");
  76.     String to=request.getParameter("to");
  77.     JSONArray jsonArray=new JSONArray();
  78.     addressBook=addressBook.subMap(from,to);
  79.     for(Iterator it=addressBook.entrySet().iterator();it.hasNext();)
  80.     {
  81.         Map.Entry entry=(Map.Entry)it.next();
  82.         String name=(String)entry.getKey();
  83.         Address address=(Address)entry.getValue();
  84.         JSONObject json=new JSONObject();
  85.         json.put("name",name);
  86.         
  87.         JSONObject jsonAddress=new JSONObject();
  88.         String street=address.getStreet();
  89.         String city=address.getCity();
  90.         String zip=Integer.toString(address.getZip());
  91.         jsonAddress.put("street",street);
  92.         jsonAddress.put("city",city);
  93.         jsonAddress.put("zip",zip);
  94.         json.put("address",jsonAddress);
  95.         
  96.         JSONObject jsonTel=new JSONObject();
  97.         String tel1=address.getTel();
  98.         String tel2=address.getTelTwo();
  99.         jsonTel.put("tel1",tel1);
  100.         jsonTel.put("tel2",tel2);
  101.         json.put("tel",jsonTel);
  102.         
  103.         jsonArray.put(json);
  104.     }
  105.     String result=new JSONObject().put("addressBOOK",jsonArray).toString();
  106.     response.getWriter().write(result);
  107. %>

你可能感兴趣的:(AJAX与JSON的操作(JQuery))