ajax+json实现多级联动菜单

● AjaxAction.java文件，后台java处理采用struts框架来实现的

package com.ajax.struts.action;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.apache.struts.actions.DispatchAction;

public class AjaxAction extends DispatchAction {

 public ActionForward ajax(ActionMapping mapping, ActionForm form,

   HttpServletRequest request, HttpServletResponse response) {

  //获得value的值，实际应用中是通过此值到数据库中查找数据，

  //然后将数据转换成json格式写回页面中

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

  PrintWriter out = null;

  try {

   response.setCharacterEncoding("utf-8");

   out = response.getWriter();

  } catch (IOException e) {

   return null;

  }

  //下面的操作是为了生成不同的option的值，实际应用应该是从数据库中查出并转换成json的

  StringBuffer json = new StringBuffer();

  json.append("[");

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

   json.append("{value:'").append(value + i).append("',name:'")

     .append(value + i).append("'}");

   if (i < 4) {

    json.append(

   }

  }

  json.append("]");

  out.print(json.toString());//将json串写回客户端

  out.flush();

  return null;

 }

}

● struts-config.xml文件

          attribute="ajaxForm"

      input="/form/ajax.jsp"

      name="ajaxForm"

      path="/ajax"

      scope="request"

      parameter="action"

      type="com.ajax.struts.action.AjaxAction" />

● ajax.jsp文件

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

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

   

    -----请选择-----

    -----请选择-----

    -----请选择-----

    -----请选择-----

     

• 用ajax和json实现多级联动菜单其实很简单，这里给你一些启事，你会很容易掌握的

     

• 如果发现有不足的地方欢迎和我讨论，地址:songbing0520@126.com

     

• 希望和大家共同进步

    

● ajax.js文件

var xmlHttp;

var state;//保存id

function createXMLHttpRequest() {//构建ajax的核心对象xmlHttpRequest

 if(window.ActiveXObject) {

  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

 } else if(window.XMLHttpRequest) {

  xmlHttp = new XMLHttpRequest();

 }

 return xmlHttp;

}

function $(id){//获得页面元素

 return document.getElementById(id);

}

function addOption(id,_json){//通过json传入，增加select的option

 var _s = $(id);

 _s.options.length = 1;

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

  var option=new Option(_json[i].name,_json[i].value);

        _s.add(option); 

 }

}

function getSelectOption(value,id){

 var url = "ajax.do?action=ajax";

 state = id;

 getValue(url,value);

}

function getValue(url,value){

 xmlHttp = createXMLHttpRequest();

 xmlHttp.open("post",url,true);

 xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');

 xmlHttp.onreadystatechange = handleStateChange;

 xmlHttp.send("value="+value);

}

function handleStateChange(){

 if(xmlHttp.readystate==4){

  if(xmlHttp.status==200){

   callBack();

  }

 }

}

function callBack(){

 var _json = eval(xmlHttp.responseText);

 addOption(state,_json);

}