无刷新搜索问题


通过下拉列表查找匹配的内容，然后下方列表更新为所搜索内容。可是，页面通过onLoad="getData()"刷新列表，默认列表显示所有数据。当查找到数据后，又立即执行onLoad="getData()" 列表被刷新为所有数据。被查找数据无法显示就被刷新。怎么解决这个问题呢

解决方案 »

  1.   


    if (flag == null) {
    response.sendRedirect("ge_list.jsp");
    return;
    }
        
    //业务逻辑对象
        BoMessage boMessage = new BoMessage();
        if(flag.equals("find")){

    String jiequ = request.getParameter("jiequ").trim();
    String danyuan = request.getParameter("danyuan").trim();
    String ttime = request.getParameter("ttime").trim();

    if (jiequ.equals("") || danyuan.equals("") ) {
    out.println("<script>alert('信息不能为空！')</script>");
    out.println("<script>window.location.href='ge_list.jsp'</script>");
    } else {

    jiequ = getCode(jiequ);
    danyuan = getCode(danyuan);
    ttime = getCode(ttime);

    }
    ArrayList<Message> list=boMessage.findMessage(jiequ,danyuan);//搜索得
    }
     
    //所有得
    ArrayList<Message> list = boMessage.getMessageList();
    返回来的既有搜索到的数据，最后又得到所有数据。
    如果用
     if(flag.equals("load")){
    ArrayList<Message> list = boMessage.getMessageList();
    }
    对显示列表
    <%
    for (int i = 0; i < list.size(); i++) {
    Message message = list.get(i);
    %>又有影响。
    怎么改才对。
      

  2.   

    把onLoad="getData()"去掉，
    或者，
    如1楼所说，改用Ajax路线。
      

  3.   

    恩，用ajax是对的，到网上搜搜吧，用jquery的ajax很简单的说
      

  4.   

    这个问题好办，，如果想给用户带来更好的体验。建议用JQuery如果没时间去研究JQUERY那就用普通的方式，让他刷新。。提交表单的时候，给一个参数就行。onload的时候写一个
    if（这个参数怎么着的时候）{执行}esle{不执行}。。这样的方式这是最基本的思路
    不过我个人不建议在JSP上使用onload事件
      

  5.   

    就是用了ajax，现在是参数，到数据库取值阶段。
    就这段代码我觉得有问题，才请教各位的。
      

  6.   

    我将sql语句传到java类查询出结果并添加到集合中。在这个java类中加了输出语句System.out.println(sql);
    运行可以看出
    第一次打开页面输出
    select * from individual,zbiao where individual.unum=zbiao.unum 
    此时列表显示所有数据。
    当通过下拉列表查询后输出
    select * from zbiao where unum in (select unum from individual where jiequ='街区一' and danyuan='一栋三单元')
    select * from individual,zbiao where individual.unum=zbiao.unum 
    select * from individual,zbiao where individual.unum=zbiao.unum 
    也就是说将查询出结果后，又自动刷新了2次页面，最终查询数据无法显示。
      

  7.   

    [code=JSP]<%@ page contentType="text/html;charset=gb2312"%>
    <%@ page language="java" import="java.sql.*"%>
    <jsp:useBean id="adminBean" scope="page" class="wem.wem"/>
    <html>
    <head>
    <style type="text/css">
    <!--
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    .STYLE1 {font-size: 12px}
    .STYLE3 {font-size: 12px; font-weight: bold; }
    .STYLE4 {
    color: #03515d;
    font-size: 12px;
    }
    a:link {
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: none;
    }
    a:active {
    text-decoration: none;
    }
    -->
    </style>
    <script language = "JavaScript">
    var subcat = new Array();
     <%
     int count = 0;
    String sql= "select * from danyuan ";
    ResultSet rs=adminBean.executeQuery(sql);
    while(rs.next())
    {
    String ldnum=new String(rs.getString("ldnum"));
    String ldname=new String(rs.getString("ldname"));
    String jiequ=new String(rs.getString("jiequ"));%>
    subcat[<%=count%>] = new Array('<%=jiequ%>','<%=ldname%>','<%=ldnum%>');<%
    count = count + 1;
    }
    %>
    function changeselect(selectValue)
        {
    document.selectform.danyuan.length = 0; document.selectform.danyuan.options[0] = new Option('请输入楼栋号','');  
        for (i=0;i <subcat.length; i++)
            {
             if (subcat[i][0] == selectValue){   
                    document.selectform.danyuan.options[document.selectform.danyuan.length] = new Option(subcat[i][1], subcat[i][1]);
                  
            }
            
        }  
        }    
     
       // -->
    </script><script language = "JavaScript">
     
    var xmlRequest;

    function getXMLHttpRequestObject(){
      
    try{
    xmlRequest = new XMLHttpRequest(); //Firefox ,safari
    }catch(e){
    //IE
    try{
    xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    return xmlRequest;
    }
        function getData(flag,id){
            var url="ge_getdata.jsp";

            xmlRequest = getXMLHttpRequestObject();
    if(xmlRequest==null){
    alert("您的浏览器不支持AJAX!");
    return;
    }
        // 默认打开列表
                if(flag=="load"){

    url +="?flag=load";


    xmlRequest.onreadystatechange = dataChanged;
    xmlRequest.open("GET",url,false);
    xmlRequest.send(null);
         }
        
         // 
            else if(flag=="find"){
        
            var jiequ=document.selectform.jiequ.value;
            var danyuan = document.selectform.danyuan.value;
    var ttime = document.selectform.ttime.value;
         if(jiequ==""||danyuan==""||ttime==""){
    alert("信息不完整！");
    document.selectform.jiequ.focus();
    return;
    }

    //拼接请求的字符串
    var url = "ge_getdata.jsp?flag=find";

    url+="&jiequ="+jiequ+"&danyuan="+danyuan+"&ttime="+ttime;
    url=encodeURI(url);
    url=encodeURI(url); 
            

    xmlRequest.onreadystatechange = dataChanged;
    xmlRequest.open("POST",url,true);
    xmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    xmlRequest.send(url); 
        }      
        }
        function dataChanged(){
    if(xmlRequest.readyState==4){
    if(xmlRequest.status==200){
    showDatas();
    }else { //页面不正常
                    window.alert("您所请求的页面有异常。");
                }
    }
    }
    function showDatas(){
      //从响应页面得到数据
      var message = xmlRequest.responseText;

      document.getElementById("datadiv").innerHTML = message;
      
     document.selectform.jiequ.value="";
     document.selectform.danyuan.value="";
     document.selectform.ttime.value="";

    }
       // -->
    </script>
    </head>
    <body onLoad="getData('load','')">
    <div id="maindiv">
    <div id="finddiv">
    <form  name="selectform" method="post" action="" >
          <table width="529" border="0">
            <tr>
              <td width="19">&nbsp;</td>
              <td width="116"><span class="STYLE49">
                <select name="jiequ" id="jiequ" onChange="changeselect(this.value)" >
                  <option value="">请选择街区号</option>
                  <%String sql13 = "select * from jiequ";
               ResultSet rs13 = adminBean.executeQuery(sql13);
         while(rs13.next())
         { String aa=rs13.getString("jqname");
         %>
                  <option value="<%=aa%>"><%=aa%></option>
                  <%}
          %>
                </select>
              </span></td>
              <td width="122"><span class="STYLE50">
                <select name="danyuan" id="select3">
                  <option value="">请选择单元号</option>
                </select>
              </span></td>
              <td width="133"><span class="STYLE49">
                <select name="ttime" id="ttime">
                  <option value="">请选择街时间段</option>
                  <%String sql15 = "select * from timeset ";
               ResultSet rs15 = adminBean.executeQuery(sql15);
         while(rs15.next())
         { String aa=rs15.getString("tsname");
         %>
                  <option value="<%=aa%>"><%=aa%></option>
                  <%}
          %>
                </select>
              </span></td>
              <td width="48">&nbsp;</td>
              <td width="65"><table width="97%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="45%" class="STYLE51"><div align="center"> <img src="../images/edit.gif" width="16" height="16" /></div></td>
                  <td width="55%" class="STYLE51"><div align="center">
                      <input type="submit" type="button" value="确 定" onclick="getData('find','')"/>
                  </div></td>
                </tr>
              </table></td>
            </tr>
          </table>
    </form>
    </div>
    <div id="datadiv"></div>
    </div>
    </body>
    </html>[/code]
      

  8.   

    ajax无刷新技术可以解决！例如使用EXTJS
      

  9.   

    楼主要么将onLoad="getData('load','')"去掉。
    要么将查询数据库并返回结果的代码移出当前JSP，移到另一个JSP或Servlet中去。在当前JSP中请求这个新的Servlet。
      

  10.   

    把getData取消了，也移到令个jsp中去了。还是有问题
    能看到查询出的列表 但出现了一下 就立即被刷新了
      

  11.   

    如果onLoad都取消了，怎么还会有重新获取的事情发生呢？这就奇怪了。
    你在页面中右击鼠标查看页面源码，看看其中是不是有两份数据。
    需要重点走查的还有：
    ①JSP中有没有做重定向
    ②JS中有没有发出第二个请求给楼主的另外一个建议是该考虑改良你的设计了，JS和JSP脚本混用是很糟糕的，会把自己绕糊涂的。
      

  12.   


    onload本身已经不是无刷新了吧？你用jquery取到值后把原来的div隐藏，显示一个新的div就行了吧，或者显示前面的div也就把后面的给覆盖了
      

  13.   

    我又写上了onload。
    把查询移到另个jsp中，重启了计算机。然后就可以查询了。谢谢大家啦