ajax做三级联动
来源:互联网 发布:洛阳智网网络休息 编辑:程序博客网 时间:2024/04/30 17:45
很多地方需要ajax三级联动才能完成功能;我就按我的步聚来一步一步写,如果有不懂,可以Q我,我也可以发包给他. 对了,用struts 和 hibernate 容易实现
先经过一个login.jsp页面,这个页面主要是实现一次请求,来查询表,查询出三级联动的第一级
(国家--省份--市),先查出 国家,
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>
<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;
}
}
* 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>
<%...@ 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 怎么配制 我想你们会知道怎么配制
- ajax做三级联动
- ajax做三级联动
- Ajax三级联动
- ajax知识点-三级联动
- AJAX实现三级联动
- AJAX三级联动
- ajax三级联动
- 三级联动AJAX
- jquery ajax 三级联动
- Ajax实现三级联动
- ajax三级联动
- jQuery Ajax三级联动
- ajax省市区三级联动
- ajax三级联动菜单
- Ajax三级联动
- ajax省市区三级联动
- ajax三级省联动
- ajax三级联动
- AFX.H
- 什么是OO思想
- UML 参考手册读书笔记(一)
- 65414451
- FCKEditor使用说明(Csdn博客就是用的这个编辑器)
- ajax做三级联动
- 可编程的配置方式
- JMS(Jboss Messaging)的一点使用心得(十)对IPv6的支持
- MFC Windows 程序设计(4)
- FCKEDITOR在线编辑器 (ASP.NET中的用法)
- 获得SessionFactory
- 笑看江苏
- 国际:程序员保持身心健康的八种方式
- JDBC连接