纯servlet+JSP+ztree+ajax+json开发城市列表

来源：互联网发布：java开发大学项目编辑：程序博客网时间：2024/05/16 07:52

无框架模式下

新建servlet如下：

package com.test.controller;

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

import javax.servlet.RequestDispatcher;
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 com.test.model.CityModel;
import com.test.model.CityModelHelper;

public class CityController extends HttpServlet {

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8");
  response.setCharacterEncoding("UTF-8");
  request.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  List<CityModel> list=new ArrayList<CityModel>();
  CityModel city1=new CityModel(11,0,"安徽");
  CityModel city2=new CityModel(111,11,"合肥");
  CityModel city3=new CityModel(112,11,"芜湖");
  CityModel city4=new CityModel(113,11,"六安");
  CityModel city5=new CityModel(114,11,"安庆");
  CityModel city6=new CityModel(115,11,"滁州");
  CityModel city7=new CityModel(116,11,"池州");
  CityModel city8=new CityModel(12,0,"江苏");
  CityModel city9=new CityModel(121,12,"南京");
  CityModel city10=new CityModel(122,12,"苏州");
  CityModel city11=new CityModel(123,12,"扬州");
  CityModel city12=new CityModel(124,12,"常州");
  CityModel city13=new CityModel(125,12,"无锡");
  CityModel city14=new CityModel(126,12,"徐州");
  list.add(city1);list.add(city2);list.add(city3);list.add(city4);
  list.add(city5);list.add(city6);list.add(city7);list.add(city8);
  list.add(city9);list.add(city10);list.add(city11);list.add(city12);
  list.add(city13);list.add(city14);
  RequestDispatcher rd = request.getRequestDispatcher("Mytest.jsp");
  List<CityModelHelper> list2=new ArrayList<CityModelHelper>();
  System.out.println(list.size());
  for(int i=0;i<list.size();i++){
   CityModelHelper cityModelHelper=new CityModelHelper(list.get(i).getCityId(),list.get(i).getProvinceId(),list.get(i).getCityName());
   list2.add(cityModelHelper);
  }
  CityModelHelper city15=new CityModelHelper(0,1000,"全国");
  list2.add(city15);
//
//  for(int i=0;i<list2.size();i++){
//   System.out.println(list2.get(i));
//  }
//
  JSONArray jsonArray = JSONArray.fromObject(list2);
//  System.out.println(jsonArray.toString()+"前");
//  request.setAttribute("jsonArray",jsonArray);//存值
//  out.print(jsonArray.toString());
//  rd.forward(request,response);
  String json=jsonArray.toString();
  response.getWriter().write(json);

System.out.println(json+"后");

}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doGet(request, response);
}

}

在web.xml文件中进行配置：

<servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>CityController</servlet-name>
    <servlet-class>com.test.controller.CityController</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>CityController</servlet-name>
<url-pattern>/CityController</url-pattern>
</servlet-mapping>

前端页面如下：

<%@ page language="java"
import="java.util.*,com.test.model.CityModelHelper"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>后端城市列表</title>

  var zNodes;
  var treeObj;

         var setting = {
            check:{ //显示复选框
                enable:true
            },
            view: {
    showIcon: false //不显示图标
   },
            data:    {
                simpleData:{
                    enable:true,
                    idKey: "cityId", //更改子节点名称为"cityId"
           pIdKey: "provinceId",   //更改父节点名称为"provinceId"
                },
                 key:{
           name: "cityName",   //更改name为"cityName"
                }
            },
            callback:{
                onCheck:onCheck   //增加毁掉函数onCheck
            }
         };



         function locking(){   //响应鼠标点击按钮事件


            $.ajax({
          type:'POST', //请求方式
          url:'/test/CityController', //请求路径
          contentType:"application/json",//解决中文乱码问题
          cache: false,   //设置不换存

             success:function(data){
                 zNodes=eval("("+data+")");
                 $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化ztree//将后台的json字符串转成ztree所需要的格式
             },
             error:function(){
               alert("error");
             }
         });

             document.all.ly.style.display="block";
             document.all.ly.style.width=document.body.clientWidth;
             document.all.ly.style.height=document.body.clientHeight;
             document.all.Layer2.style.display='block';

}
         function Lock_CheckForm(theForm){   //响应确认按钮事件
             document.all.ly.style.display='none';document.all.Layer2.style.display='none';
             return false;
         }

         function onCheck(e,treeId,treeNode){
              treeObj=$.fn.zTree.getZTreeObj("treeDemo"), //获取ztree实体
              nodes=treeObj.getCheckedNodes(true),
              v="";
              cityId="";
              for(var i=0;i<nodes.length;i++){
                   if(nodes[i].provinceId!=0&&nodes[i].cityId!=0){
                        v+=nodes[i].cityName + ",";//获取选中节点的城市名称
                        cityId+=nodes[i].cityId+",";
                       }
                   }
                    alert(v);
                    alert(cityId);
                    $(".acity").val(v);
          }
</script>

</head>
<body>
  <p align="center">
   <input type="text" class="acity"></input>
   <input type="button" value="选择城市" onClick="locking()" />
  </p>
  <div id="ly"
   style="position: absolute; top: 0px; filter: alpha(opacity =   60); background-color: #777; z-index: 2; left: 0px; display: none;">
  </div>
  
  <div id="Layer2" align="center"
   style="position: absolute; z-index: 3; left: 550px; top: 100px; background-color: #fff; display: none;">
   <table width="400" height="550" border="0" cellpadding="0"
    cellspacing="0"
    style="border: 1 solid #e7e3e7; border-collapse: collapse;">
    <tr
     style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; font-weight: bold; font-size: 16px;"
     valign="middle" height="50px">
     <td style="padding-left: 20px">
      <div>请选择城市</div>
     </td>
     <td></td>
    </tr>
    <tr style="height: 450px; background-color: white">
     <td align="center" colspan="2">
      <div class="content_wrap">
       <ul id="treeDemo" class="ztree"></ul>
      </div>
     </td>
    </tr>
    <tr style="font-size: 16px;border-top:1px solid gray;background-color:gray">
     <td align="center">
     <a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">
       <button style="width: 60px; font-size: 16px">取消</button></a></td>
     <td align="center">
       <a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">
       <button style="width: 60px; font-size: 16px">确认</button></a>
     </td>
    </tr>
   </table>
  </div>
  
</body>

0 0