您的位置：首页 > Web前端 > JQuery

使用jquery和json实现系部与班级的级联

2011-10-04 14:05 260 查看
在web开发中，客户端都要和服务器进行交互，最典型的例子如下所示：用户点击的大的分类，之后服务器给出这些大分类的具体item



要做这样的开发，首先要下载json的六个开发包，我过一下会把这些开发包上传到我的资源里，还有就是jquery的开发包。这个网上很多，我就不提供了，我们先来写一个jsp页面，这里就只贴出主要代码了。

<body>
请选择系部:<select id="depart">

</select>
请选择班级:<select id="classes">

</select>
</body>





现在来写一个servlet，这个servlet用来和jquery交互，代码如下所示

package org.lxh.servlet;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.lxh.dao.ClassService;
import org.lxh.dao.DepartService;
import org.lxh.vo.Banji;
import org.lxh.vo.Depart;
import org.springframework.context.support.AbstractApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
public class SelectDepart extends HttpServlet {
private static final long serialVersionUID = 1L;

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

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String type=request.getParameter("action");

JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
JSONObject member = null;  //json对象
AbstractApplicationContext ctx=new ClassPathXmlApplicationContext("beans.xml");
if("depart".equals(type)){
DepartService departService=(DepartService)ctx.getBean("departBean");
List<Depart> list=new ArrayList<Depart>();
list=departService.getAll();  //这里查询出系部编号和名称

Iterator<Depart> it=list.iterator();
Depart depart=null;
while(it.hasNext())
{
depart=new Depart();
depart=it.next();

member = new JSONObject();
member.put("departname", depart.getDepartname());  //把系部名称存入json
member.put("departno", depart.getDepartno());   //把系部编号存入json
array.add(member);   //把信息存入json集合
json.put("departmsg", array); //把json集合存入json，下面的代码也是一样

}

}
else if("class".equals(type)){
String num=request.getParameter("id");

ClassService classService=(ClassService)ctx.getBean("classBean");
List list=classService.findAllClass(num);  //这里查询出班级编号和名称
Iterator it=list.iterator();
while(it.hasNext())
{

Object[] obj=(Object[])it.next();
Banji b=(Banji)obj[1];
member = new JSONObject();
member.put("classname", b.getClassname());
member.put("classno", b.getClassno());
array.add(member);
json.put("classmsg", array);

}
}

PrintWriter pw = response.getWriter();
pw.print(json.toString());
pw.close();
}

}


servlet写好了，下面来写一个js,这个js很重要，这里呢我就把js也写在jsp里面

<script type="text/javascript" src="../easyui/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$.post("../SelectDepart",{"action":"depart"},function(data, statusText){
var jsonvars = data.departmsg;// 返回JSON数据

var select=$("#depart");
select.change(getClassByDepart) ;  //下拉列表发生变化，那么班级信息也随之变化
select.html("") ;

$('<option value=0>==选择系部==</option>').appendTo(select) ;

for ( var i = 0; i < jsonvars.length; i++){
var opt = $("<option>") ;

opt.attr('value',jsonvars[i].departno) ;    //给option添加value属性
opt.html(jsonvars[i].departname).appendTo(select) ;  //把系部名称追加到option后面
}

},"json");
});
function getClassByDepart()
{

$.post("../SelectDepart",{"action":"class","id":$(this).val()},function(data, statusText){
var jsonvars = data.classmsg;// 返回JSON数据

var select=$("#classes");

select.html("") ;
$('<option value=0>==选择班级==</option>').appendTo(select) ;

for ( var i = 0; i < jsonvars.length; i++){
var opt = $("<option>") ;

opt.attr('value',jsonvars[i].classno) ;    //同上
opt.html(jsonvars[i].classname).appendTo(select) ;
}

},"json");
}
</script>


下面看一下运行效果图，如下图所示



为了让大家看的更清楚，我把数据库也贴上去，供大家参考

t_class表如下所示



t_depart表如下所示



我觉得这个例子很有帮助，如果有弄错的请大家提出来，我们一起交流。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                json
                                                jquery
                                                servlet
                                                function
                                                action
                                                list
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航