虚拟数据库_json_ajax

最新推荐文章于 2025-09-13 21:59:18 发布

weixin_30851409

最新推荐文章于 2025-09-13 21:59:18 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签： json 数据库 java

原文链接：http://www.cnblogs.com/excellencesy/p/7905589.html

本文介绍了一个使用AJAX和JSON实现的下拉菜单案例。通过选择不同国家选项，可以联动显示对应的子级城市选项。该案例展示了如何用jQuery发起AJAX请求，并将返回的JSON数据动态填充到第二个下拉列表中。

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);
    }
}