级联?数据加载问题
数据库查出数据
1 地址1 电话1 客户姓名1
2 地址2 电话2 客户姓名2
3 地址3 电话3 客户姓名3
4 地址4 电话4 客户姓名4
放在request 传到前台, 地址是下拉框,选中地址1 的时候,自动调出电话1 和客户姓名1 填写到文本框
请问这个怎么实现啊,小弟菜鸟,最好有代码,谢谢各位 级联?js?
[解决办法]
我用ajax实现了一个demo:
查询条件入口页面querySubmit.jsp:
<body>
<form name="qForm" action="QueryUser" method="post">
请输入查询条件:<input type="text" id="condition">
<input type="submit" value="查询">
</form>
</body>
package com.servlet.db;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class QueryUser
extends HttpServlet
{
private static final long serialVersionUID = 1L;
private String driver;
private String url;
private String user;
private String pass;
@Override
public void init(ServletConfig config)
throws ServletException
{
super.init(config);
}
@Override
public void service(HttpServletRequest request, HttpServletResponse response)
throws IOException
{
System.out.println("service方法进入...");
//配置文件配置的数据库驱动、url、数据库登录名、登录密码
ServletConfig config = getServletConfig();
driver = config.getInitParameter("driver");
url = config.getInitParameter("url");
user = config.getInitParameter("user");
pass = config.getInitParameter("pass");
System.out.println("数据库驱动:"+driver);
System.out.println("数据URL:"+url);
System.out.println("数据库登录名:"+user);
System.out.println("数据库密码:"+pass);
//有了数据库相关参数,用jdbc查询即可,就不做具体实现了。
//数据库查询注释掉了,模拟产生三个数据
List<User> userList = new ArrayList<User>();
User userInfo;
for (int i = 1; i <= 3; i++)
{
userInfo = new User();
userInfo.setAddress("地址" + i);
userInfo.setTel("电话" + i);
userInfo.setName("客户姓名" + i);
userList.add(userInfo);
}
HttpSession session = request.getSession();
//成员列表放Session里
session.setAttribute("userList", userList);
response.sendRedirect("selectUser.jsp");
System.out.println("service方法结束.");
}
}
<%
//从session取值
List<User> userList = (List<User>) session.getAttribute("userList");
List<String> addressSelect = new ArrayList<String>();
//初始化地址列表
if (userList != null)
{
for (User item : userList)
{
addressSelect.add(item.getAddress());
}
}
%>
<script type="text/javascript">
var xmlHttp;
//创建XMLHttpRequest
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//响应用户列表的onChange事件的处理方法
function updateSelect(){
var selected = document.all.slt1.value;
//为-1,清空操作
if(selected == -1){
document.all.tele.value="";
document.all.name.value="";
return;
}
//不为0,启用ajax
//状态触发器绑定到processor函数
createXMLHttpRequest();
xmlHttp.onreadystatechange = processor;
xmlHttp.open("GET","GetTargetUser?targetAddress="+selected);
xmlHttp.send(null);
}
//处理状态改变的函数
function processor(){
var result;
if(xmlHttp.readyState==4){//响应完成
if(xmlHttp.status==200){//返回成功
result = xmlHttp.responseXML.getElementsByTagName("user");
document.all.tele.value=result[0].childNodes[0].childNodes[0].nodeValue;
document.all.name.value=result[0].childNodes[1].childNodes[0].nodeValue;
}
}
}
</script>
<body>
请选择地址:
<select id="slt1" onChange="updateSelect()">
<option value="-1"></option>
<%
for (int i=0;i<addressSelect.size();i++)
{
%>
<option value="<%=i%>"><%=addressSelect.get(i)%></option>
<%
}
%>
</select>
电话:
<input type="text" id="tele" />
姓名:
<input type="text" id="name" />
</body>
package com.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.servlet.db.User;
public class GetTargetUser
extends HttpServlet
{
public void destroy()
{
super.destroy();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
doPost(req, resp);
}
@SuppressWarnings("unchecked")
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
System.out.println("GetTargetUser...");
//获取查询条件
int targetIndex = Integer.valueOf(req.getParameter("targetAddress"));
//从session取值
List<User> userList = (List<User>) req.getSession().getAttribute("userList");
User user = null;
if (targetIndex < userList.size())
{
user = userList.get(targetIndex);
}
if (null != user)
{
System.out.println("process user...");
//查询结果以XML文档返回给客户端
resp.setContentType("text/xml");
resp.setCharacterEncoding("UTF-8");
PrintWriter out = resp.getWriter();
//user
out.println("<response>");
out.println("<user>");
out.println("<tele>" + user.getTel() + "</tele>");
out.println("<name>" + user.getName() + "</name>");
out.println("</user>");
out.println("</response>");
out.flush();
out.close();
}
}
@Override
public void init()
throws ServletException
{
}
}
<servlet>
<servlet-name>QueryUser</servlet-name>
<servlet-class>com.servlet.db.QueryUser</servlet-class>
<init-param>
<param-name>driver</param-name>
<param-value>com.xxx.jdbc.xxxDriver</param-value>
</init-param>
<init-param>
<param-name>url</param-name>
<param-value>
jdbc:xxx-sqli://ip:port/xxxdb:XXXDBSERVER=XXX
</param-value>
</init-param>
<init-param>
<param-name>user</param-name>
<param-value>tiger</param-value>
</init-param>
<init-param>
<param-name>pass</param-name>
<param-value>t</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>QueryUser</servlet-name>
<url-pattern>/QueryUser</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>GetTargetUser</servlet-name>
<servlet-class>com.ajax.GetTargetUser</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetTargetUser</servlet-name>
<url-pattern>/GetTargetUser</url-pattern>
</servlet-mapping>