首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > J2EE开发 >

级联?数据加载有关问题

2013-07-16 
级联?数据加载问题数据库查出数据1 地址1电话1客户姓名1 2 地址2电话2客户姓名2 3 地址3电话3客户姓名34

级联?数据加载问题
数据库查出数据
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>


QueryUser.java:

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方法结束.");

    }
}


展现页面selectUser.jsp:

<%
    //从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>


实现Ajax的Servlet类GetTargetUser.java:


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
    {
    }
}


配置文件web.xml:

<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>

热点排行