代码改变世界

JSON 向页面传输对象

2013-03-27 15:09  功夫猫  阅读(360)  评论(0)    收藏  举报

1.js

$(document).ready(function () {
    $.getJSON("./ShowKinds.do?pid=0",null,callback);
    
});

function callback(data) {
    var objSelect = $(".BK");
    //注册change事件。显示小类信息。
    objSelect.change(function () {
        var pid = $(this).val();
        $.getJSON("./ShowKinds.do?pid="+pid,null,smallback);
    });
    
    for (var i = 0;i < data.length;i++) {
        //创建<option>标签,将循环的值加到标签内；
        var objOption = $("<option>");
        var str = data[i]["name"];
        var strVal = data[i]["id"];
        objOption.html(str);
        objOption.val(strVal);
        //将<option>标签添加到<select class="BK">标签内部；
        objOption.appendTo(objSelect);

    }
    //一开始刷新页面的时候，小类不为空： $.getJSON("./ShowKinds.do?pid=1",null,smallback);
}

//显示小类信息。
function smallback (data) {
    var objSelect = $(".SK");
    objSelect.empty();
    for (var i = 0;i < data.length;i++) {
        //创建<option>标签,将循环的值加到标签内；
        var objOption = $("<option>");
        objOption.html(data[i]["name"]);
        objOption.val(data[i]["id"]);
        //将<option>标签添加到<select class="SK">标签内部；
        objOption.appendTo(objSelect);
    }
}

2.ShowKindsServlet

package com.kebin.Servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.kebin.pojo.Kinds;
import com.kebin.service.impl.KindsServiceImpl;

public class ShowKindsServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        int pid = Integer.parseInt(request.getParameter("pid"));
        List<Kinds> kinds = KindsServiceImpl.getInstance().showKinds(pid);
        
        PrintWriter pw = response.getWriter();
        StringBuffer sb = new StringBuffer();
        //for循环拼接字符串 [{id:0,name:"服装"},{id:1,name:"家电"}]
        sb.append("[");
        for (int i = 0;i < kinds.size();i++) {
            sb.append("{id:").append(kinds.get(i).getId()).append(",name:\"").append(kinds.get(i).getName()).append("\"},");
        }
        //将字符串最后多余的逗号去掉，加上 ] ；
        sb.deleteCharAt(sb.length()-1);
        sb.append("]");    
        pw.print(sb);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
    }

}

3.

index.jsp 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>


    <script type="text/javascript" src="./JS/jquery.js"></script>
    <script type="text/javascript" src="./JS/myjquery.js"></script>
<!--     <link rel="stylesheet" type="text/css" href="./CSS/aa.css"> -->

  </head>
  
  <body>
<form>
    大类：<select class="BK"></select>小类：<select class="SK"></select>
</form>    
  </body>
</html>
KindsServiceImpl.java 
package com.kebin.service.impl;

import java.util.List;

import com.kebin.dao.KindsDao;
import com.kebin.dao.impl.KindsDao4MySqlImpl;
import com.kebin.pojo.Kinds;
import com.kebin.service.KindsService;

public class KindsServiceImpl implements KindsService {
    private static void KindsServiceImpl(){}
    private static KindsServiceImpl kindsService = new KindsServiceImpl();
    public static KindsServiceImpl getInstance() {
        return kindsService;
    }
    
    private static KindsDao kindsDao = new KindsDao4MySqlImpl();
    public List<Kinds> showKinds(int pid) {
        return kindsDao.getKinds(pid);
    }

}
a,sql 
create table t_kinds(
    id int auto_increment,
    name varchar(12),
    pid int,
    primary key(id)
);

insert into t_kinds values(null,'服装',0);
insert into t_kinds values(null,'家电',0);
insert into t_kinds values(null,'食品',0);

insert into t_kinds values(null,'男上衣',1);
insert into t_kinds values(null,'女上衣',1);
insert into t_kinds values(null,'裤子',1);

insert into t_kinds values(null,'电脑',2);
insert into t_kinds values(null,'洗衣机',2);
insert into t_kinds values(null,'冰箱',2);
insert into t_kinds values(null,'彩电',2);

insert into t_kinds values(null,'食品1',3);
insert into t_kinds values(null,'食品2',3);

其他的代码就不一一贴出来了。