AJAX与JSON的操作(JQuery)

最新推荐文章于 2025-08-10 19:51:39 发布

cyhgohappy

最新推荐文章于 2025-08-10 19:51:39 发布

阅读量683

点赞数

CC 4.0 BY-SA版权

文章标签： jquery json ajax function float 手机

本文链接：https://blog.youkuaiyun.com/cyhgohappy/article/details/2760782

本文介绍了一个基于HTML和JavaScript的简单地址簿搜索应用。该应用利用jQuery库和JSON数据格式实现从字母范围内的联系人搜索，并动态更新显示结果。通过两个选择框指定搜索范围，后端使用Java生成JSON响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//addressList.html
<!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>
<script type="text/javascript" src="jquery1.2.js"></script>
<script type="text/javascript">
function searchPerson()
{
    var from=$('#from option[@selected]').text();
    var to=$('#to option[@selected]').text();
    $.getJSON("rec.jsp",{"from":from,"to":to},function(json){
    //alert(json.addressBOOK[0].name);
    $("#tableBody").html('');
    $.map(json.addressBOOK,function(i){
        //alert(i.name);
        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>";
        $("#tableBody").append(html);
    }); 
    
        });
}
</script>
</head>
<body>
<div id="page">
<select size=15 id="from" style="float:left" onChange="searchPerson()">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
    <option>F</option>
    <option>G</option>
    <option>H</option>
    <option>I</option>
    <option>J</option>
    <option>K</option>
    <option>L</option>
    <option>M</option>
    <option>N</option>
    <option>O</option>
    <option>P</option>
    <option>Q</option>
    <option>R</option>
    <option>S</option>
    <option>T</option>
    <option>U</option>
    <option>V</option>
    <option>X</option>
    <option>Y</option>
    <option>Z</option>
</select>
<select size=15 id="to" style="float:left" onChange="searchPerson()">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
    <option>F</option>
    <option>G</option>
    <option>H</option>
    <option>I</option>
    <option>J</option>
    <option>K</option>
    <option>L</option>
    <option>M</option>
    <option>N</option>
    <option>O</option>
    <option>P</option>
    <option>Q</option>
    <option>R</option>
    <option>S</option>
    <option>T</option>
    <option>U</option>
    <option>V</option>
    <option>X</option>
    <option>Y</option>
    <option>Z</option>
</select>
<div style="clear:both"></div>
<div id="result">
<table><thead><tr><td>姓名</td><td>地址</td><td>手机1</td><td>手机2</td></tr></thead>
<tbody id="tableBody"></tbody>
</table>
</div>
</div>
</body>
</html>

//rec.jsp
<%@ page import="java.util.*,org.json.*"%>
<%
 class Address {
      private String street; 
      private String city; 
      private int zip;  
      private String tel;  
      private String telTwo;
    public Address() {
        // TODO Auto-generated constructor stub 
    }
    public Address(String street, String city, int zip, String tel,
            String telTwo) {
        super();
        this.street = street;
        this.city = city;
        this.zip = zip;
        this.tel = tel;
        this.telTwo = telTwo;
    }
    public String getStreet() {
        return street;
    }
    public void setStreet(String street) {
        this.street = street;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public int getZip() {
        return zip;
    }
    public void setZip(int zip) {
        this.zip = zip;
    }
    public String getTel() {
        return tel;
    }
    public void setTel(String tel) {
        this.tel = tel;
    }
    public String getTelTwo() {
        return telTwo;
    }
    public void setTelTwo(String telTwo) {
        this.telTwo = telTwo;
    }
}
    SortedMap addressBook=new TreeMap();
    Address cyhgo=new Address("5 Main Street","San Diego, CA",91912,"619-332-3452","664-223-4667");
    addressBook.put("cyhgo",cyhgo);
    Address amySmith = new Address("25 H Street","Los Angeles, CA",95212,"660-332-3452","541-223-4667"); 
    addressBook.put("Sally May",amySmith);
    Address johnKim = new Address("2343 Sugarland Drive","Houston, TX",55212,"554-332-3412","461-223-4667"); 
    addressBook.put("John Kim",johnKim);
    Address richardThorn = new Address("14 68th Street","New York, NY",12452,"212-132-6182","161-923-4001"); 
    addressBook.put("Richard Thorn",richardThorn);
    Address annMichaels = new Address("P.O BOX 54534","Seattle, WA",42452,"561-832-3180","531-133-9098"); 
    addressBook.put("Ann Michaels",annMichaels);
    Address georgeLee = new Address("131 Peach Drive","Atlanta, GA",32452,"123-722-3783","131-733-0084"); 
    addressBook.put("George Lee",georgeLee);
    Address bettyCarter = new Address("53 Mullholand Drive","Miami, FL",72452,"541-322-1723","546-338-1100"); 
    addressBook.put("Betty Carter",bettyCarter);
    Address normanTate = new Address("P.O BOX 13231","Portland, OR",52452,"341-122-0923","146-998-1172"); 
    addressBook.put("Norman Tate",normanTate);
    Address dennisWong = new Address("333 Harbour Drive","Miami, FL",74452,"521-122-8623","576-229-1234"); 
    addressBook.put("Dennis Wong",dennisWong);
    Address jackieBennet = new Address("9 Orchard Way","Cincinnati, OH",82452,"141-717-9921","172-638-01722"); 
    addressBook.put("Jackie Bennett",jackieBennet);
    
    String from=request.getParameter("from");
    String to=request.getParameter("to");
    JSONArray jsonArray=new JSONArray();
    addressBook=addressBook.subMap(from,to);
    for(Iterator it=addressBook.entrySet().iterator();it.hasNext();)
    {
        Map.Entry entry=(Map.Entry)it.next();
        String name=(String)entry.getKey();
        Address address=(Address)entry.getValue();
        JSONObject json=new JSONObject();
        json.put("name",name);
        
        JSONObject jsonAddress=new JSONObject();
        String street=address.getStreet();
        String city=address.getCity();
        String zip=Integer.toString(address.getZip());
        jsonAddress.put("street",street);
        jsonAddress.put("city",city);
        jsonAddress.put("zip",zip);
        json.put("address",jsonAddress);
        
        JSONObject jsonTel=new JSONObject();
        String tel1=address.getTel();
        String tel2=address.getTelTwo();
        jsonTel.put("tel1",tel1);
        jsonTel.put("tel2",tel2);
        json.put("tel",jsonTel);
        
        jsonArray.put(json);
    }
    String result=new JSONObject().put("addressBOOK",jsonArray).toString();
    response.getWriter().write(result);
%>