Ajax和JSON完成二级菜单联动的功能

首先需要找好JSON的包哦：

　　链接：http://pan.baidu.com/s/1jH6gN46 密码：lbh1

1:首先创建一个前台页面,比如secondMenu.jsp,源码如下所示：

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!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>二级菜单联动</title>

 <script type="text/javascript" src="js/jquery.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //给下拉列表添加事件

         $("#city1").change(function(){

             //测试可以拿到值，也用于测试是否正确引入js

             //alert($(this).val()+" "+$("#city1 option:selected").text());

             //post传输，固定四个参数；

             //第一个参数是url:发送请求地址

             //第二个参数data:待发送的值key/value

             //第三个参数callback:发送返回时回调函数

             //第四个参数type:返回内容格式，常用text，json,

             $.post("city",{city1:$(this).val()},

                 function(result){

                 //获取第二级城市的id

                 var city2=$("#city2");

                 //清空第二级里面的城市

                 city2.empty();

                 for(var i=0;i<result.length;i++){

                     city2.append("<option value="+result[i].id+">"+result[i].name+"</option>");

                 }

             },"json");

         });

     });

 </script>

 </head>

 <body>

 <h2>城市</h2>

 <select id="city1" onchange="">

     <option value="1">河南</option>

     <option value="2">北京</option>

 </select>

 <select id="city2">

     <option value="1001"></option>

     <option value="1002"></option>

     <option value="1003"></option>

     <option value="1004"></option>

 </select>

 </body>

 </html>

2：然后创建一个实体类，比如CityInfo.java,源码如下所示：

 package com.bie.po;

 /**

 * @author BieHongLi

 * @version 创建时间：2017年3月4日 下午3:48:48

 * 城市的实体类

 */

 public class CityInfo {

     private Integer id;

     private String name;

     public Integer getId() {

         return id;

     }

     public void setId(Integer id) {

         this.id = id;

     }

     public String getName() {

         return name;

     }

     public void setName(String name) {

         this.name = name;

     }

     //重写构造方法

     public CityInfo(Integer id, String name) {

         super();

         this.id = id;

         this.name = name;

     }

 }

3：模拟数据库进行后台处理，在servlet页面进行处理，源码如下所示：

 package com.bie.servlet;

 import java.io.IOException;

 import java.io.PrintWriter;

 import java.util.ArrayList;

 import java.util.List;

 import javax.servlet.ServletException;

 import javax.servlet.annotation.WebServlet;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import com.bie.po.CityInfo;

 import net.sf.json.JSONArray;

 /**

 * @author BieHongLi

 * @version 创建时间：2017年3月4日 下午3:36:32

 *

 */

 @WebServlet("/city")

 public class SecondMenuServlet extends HttpServlet{

     private static final long serialVersionUID = 1L;

     @Override

     protected void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         this.doPost(request, response);

     }

     @Override

     protected void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         //获取前台页面传输的数据

         String city1=request.getParameter("city1");

         System.out.println("测试数据："+city1);

         //存放城市的实体类

         List<CityInfo> list=new ArrayList<>();

         //模拟数据库，将前台的数据进行匹配，如果匹配显示下面创建的城市

         if("1".equals(city1)){

             for(int i=0;i<;i++){

                 CityInfo ci=new CityInfo(i, "新乡"+i);

                 list.add(ci);

             }

         }

         if("2".equals(city1)){

             for(int i=0;i<10;i++){

                 CityInfo ci=new CityInfo(i, "北京"+i);

                 list.add(ci);

             }

         }

         //将json所需的包放到lib里面,将list转换为json

         JSONArray json=JSONArray.fromObject(list);

         //响应前台页面

         response.setCharacterEncoding("utf-8");

         response.setContentType("text/json");

         PrintWriter out=response.getWriter();

         out.println(json);//打印json，为了前台页面获取

         out.flush();//刷新流

         out.close();//关闭流

     }

 }

效果如下所示：

Ajax和JSON完成二级菜单联动的功能

革命尚未成功，别先生仍需努力啊！！！

秒客网

Ajax和JSON完成二级菜单联动的功能

相关文章