ajax做三级联动

最新推荐文章于 2021-12-31 16:58:27 发布

荣兄

最新推荐文章于 2021-12-31 16:58:27 发布

阅读量1.3k

点赞数

文章标签： ajax import function struts xmlhttprequest null

本文链接：https://blog.youkuaiyun.com/xiangrong530/article/details/1908855

版权

很多地方需要ajax三级联动才能完成功能；我就按我的步聚来一步一步写，如果有不懂，可以Q我，我也可以发包给他. 对了，用struts 和 hibernate 容易实现

先经过一个login.jsp页面，这个页面主要是实现一次请求，来查询表，查询出三级联动的第一级

（国家--省份--市）,先查出国家,

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

< html >

< head >

< script >

function loginDiv()

{

window.location.href="index.do?action=findFinace&id=0";

}

</ script >

</ head >

< body >

< form >

< input type ="button" value ="点击进入AJAX三级联动" onclick ="loginDiv()" >< p >

</ form >

</ body >

</ html >

2,点击经过action ,调用find方法

* Generated by MyEclipse Struts

* Template path: templates/java/JavaClass.vtl

package com.demo;

import java.io.BufferedWriter;

import java.io.FileOutputStream;

import java.io.FileWriter;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.util.ArrayList;

import java.util.Iterator;

import java.util.List;

import java.util.Vector;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;

import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;

import org.apache.struts.action.ActionMapping;

import org.apache.struts.actions.DispatchAction;

import org.hibernate.Session;

import org.hibernate.SessionFactory;

import org.hibernate.Transaction;

import org.hibernate.cfg.Configuration;

import org.jdom.Document;

import org.jdom.Element;

import org.jdom.output.Format;

import org.jdom.output.XMLOutputter;

import com.demo.pojo.Area;

import com.demo.pojo.Bbs;

import com.demo.pojo.Financing;

/**

* MyEclipse Struts

* Creation date: 11-08-2007

* XDoclet definition:

* @struts.action path="/login" name="loginForm" scope="request"

public class IndexAction extends DispatchAction {

* Generated Methods

/**

* Method execute

* @param mapping

* @param form

* @param request

* @param response

* @return ActionForward

public ActionForward query(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response) {

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-cache");

response.setCharacterEncoding("UTF-8");

String strid=request.getParameter("id");

if(strid!=null){

int id=Integer.parseInt(request.getParameter("id"));

Integer idt=new Integer(id);

Session session =this.getSesion();

Transaction tx=null;

tx=session.beginTransaction();

List listProv=session.createQuery(" from Area as a where a.areaid="+idt).list();

Document doc=new Document();

Element root=new Element("roots");

/*for(Object o:listProv){

System.out.println("eeeeeeeeeeeeeeeeeeeeeeeee");

Element prov=new Element("provs");

prov.addContent(new Element("area").addContent(((Area)o).getArea()));

//prov.addContent(((Area)o).getArea());

root.addContent(prov);

}*/

// 锟矫碉拷锟斤拷

Iterator iter=listProv.iterator();

while(iter.hasNext()){

Area area=(Area)iter.next();

Element prov=new Element("provs");

prov.addContent(new Element("areas").addContent(area.getArea()));

prov.addContent(new Element("id").addContent(area.getId().toString()));

root.addContent(prov);

}

doc.addContent(root);

XMLOutputter outputter=new XMLOutputter(Format.getPrettyFormat().setEncoding("UTF-8"));

try {

//PrintWriter wr = new PrintWriter(new BufferedWriter(new FileWriter("c:/do.txt")));

outputter.output(doc,response.getWriter());

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

tx.commit();

}

return null;

}

public ActionForward find(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response) {

response.setCharacterEncoding("UTF-8");

Session session =this.getSesion();

Transaction tx=null;

tx=session.beginTransaction();

List listCountry=session.createQuery(" from Area as a where areaid=0").list();

request.setAttribute("listCountry", listCountry);

tx.commit();

session.close();

return mapping.findForward("index");

}

public Session getSesion(){

SessionFactory sessionFactory=null;

Configuration config=new Configuration().configure("hibernate.cfg.xml");

sessionFactory=config.buildSessionFactory();

Session session =sessionFactory.openSession();

return session;

}

返回三级联动页面

index.jsp

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

<% @ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

<% @ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<% @ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

< html >

< head >

< title > My JSP 'index.jsp' starting page </ title >

</ head >

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

< script >

var xmlHttp;

function cerateXMLHttpRequest()

{

if(window.XMLHttpRequest)

{

xmlHttp = new XMLHttpRequest();

}else if(window.ActiveXObject)

{

try{

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

}catch(e){

try{

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

}catch(e){

alert("创建异步对象失败");

}

if(!xmlHttp)

{

alert("创建异步对象失败");

return;

}

//利用ajaxa+struts做三级联动

//选择国家

function selectCountry(country)

{

if(country=="")

{

document.f.selectProvince.options.length = 1;

document.f.selectCity.options.length = 1;

return;

}

sendSelectCountry("index.do?action=query&id="+country);

}

//ajaxa发送函数,发送国家

function sendSelectCountry(url)

{

cerateXMLHttpRequest();

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

xmlHttp.onreadystatechange=processCountry;

//xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

xmlHttp.send(null);

}

//以国家来返回省的响应函数

function processCountry()

{

if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

var doc=xmlHttp.responseXML;

var pro=doc.getElementsByTagName("provs");

document.f.selectProvince.options.length = 1;

document.f.selectCity.options.length = 1;

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

var p=pro[i];

document.f.selectProvince.add(new Option(p.childNodes[0].firstChild.data,p.childNodes[1].firstChild.data));

}

}else{

alert("请求页面异常");

}

//选择省份

function selectProv(province)

{

if(province=="")

{

document.f.selectCity.options.length = 1;

return;

}

sendSelectProvince("index.do?action=query&id="+province);

}

//ajaxa发送函数,发送省份

function sendSelectProvince(url)

{

cerateXMLHttpRequest();

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

xmlHttp.onreadystatechange=processProvince;

//xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

xmlHttp.send(null);

}

//以省份来返回市的响应函数

function processProvince()

{

if(xmlHttp.readyState==4)

{

if(xmlHttp.status==200)

{

var doc=xmlHttp.responseXML;

var pro=doc.getElementsByTagName("provs");

document.f.selectCity.options.length = 1;

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

var p=pro[i];

document.f.selectCity.add(new Option(p.childNodes[0].firstChild.data,p.childNodes[1].firstChild.data));

}

}else{

alert("请求页面异常");

}

</ script >

< body >

< form name ="f" >

< h3 id ="findmates" > 利用ajaxa+struts做三级联动 </ h3 >

< p >

请选择国家 < select name ="province" onchange ="selectCountry(this.value)" >

< option value ="" > --请选择-- </ option >

< logic:present name ="listCountry" >

< logic:iterate collection ="${listCountry}" id ="lis" >

< option value ="${lis.id }" > ${lis.area } </ option >

</ logic:iterate >

</ logic:present >

</ select >

请选择省份 < select name ="selectProvince" onchange ="selectProv(this.value)" >

< option value ="" > --请选择-- </ option >

</ select >

请选择市 < select name ="selectCity" >

< option value ="" > --请选择-- </ option >

</ select >

</ p >

</ form >

</ body >

</ html >

点击国家，他就会去通过ajax 调用 action里面的 query()方法

在把值给下一级

struts-config.xml和 hibernate.hibernate.cfg.xml 怎么配制我想你们会知道怎么配制