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

最新推荐文章于 2022-02-10 11:57:03 发布

青蛙小王子

最新推荐文章于 2022-02-10 11:57:03 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： json与jquery交互文章标签： json jquery servlet function action list

本文链接：https://blog.youkuaiyun.com/walkcode/article/details/6843704

json与jquery交互专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Spring框架在前端页面和后端Servlet之间进行交互的例子，包括创建JSP页面、编写Servlet代码以及使用jQuery进行交互。通过查询数据库并返回JSON数据，展示了如何在客户端展示系部和班级信息。

在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>

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