Question

我正在使用Ajax进行实时搜索，我想要的是将数据显示在名为“results”的div中。但是，当我进行搜索时，它会再次显示搜索表单，然后显示结果div。我该如何解决这个问题？这是ajax代码：

function finding(str)
{
    if (str.length==0)
      { 
          document.getElementById("results").innerHTML="";
          return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("results").innerHTML=xmlhttp.responseText;
            }
  }

xmlhttp.open("GET","toy_search.jsp?query="+str,true);
xmlhttp.send();
}

我在此处添加了搜索页面：

<%@page contentType="text/html" pageEncoding="UTF-8" import="java.sql.*, toyShop.*,java.util.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Toy Search</title>
    <script type="text/javascript" src="js/search.js"></script>
</head>
<body>



  <h2>Toy Search</h2>
    Find toy: <input type="text" name="query" id="query" onkeyup="finding(this.value)" /><br>

    <%
        ToyManager toyM = new ToyManagerImp();
        ArrayList<ToyData> toy_data = new ArrayList<ToyData>();
        String toyName = null;
        String toyBrand = null;
        String desc = null;
        if(!MySQLConn.getInstance().isConnected()){
            MySQLConn.getInstance().connect();
        }
        if(request.getParameter("query") != null && !request.getParameter("query").equals("")){
            String query = request.getParameter("query");     
            toy_data = toyM.searchToy(MySQLConn.getInstance(), query);
        }
    %>
    <div id="results">
    <%
        if(toy_data != null && !toy_data.isEmpty()){
        for(int i = 0; i < toy_data.size(); i++){%>

                   <%=toy_data.get(i).getToyName()%>
                   <%= "<br>"%>

    <%    }
        }
    %>
    </div>

</body>
</html>

Answer 1

没有看到你的其余代码，很难说。如果你想从页面中删除搜索字段并只显示结果，我建议在以下函数中的某处添加一行javascript来更新搜索div上的css样式以显示：hidden。

xmlhttp.onreadystatechange=function()
  {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("results").innerHTML=xmlhttp.responseText;
            }
  }

Answer 2

您要求提供一个包含Ajax调用的完整网页，而您正在收回一个。正如他们所说，它正如设计的那样工作。问题不在于您的Ajax，而在于您从服务器返回的内容。您应该返回搜索结果数据，而不是恰好有搜索结果数据的网页。在页面上显示静态HTML元素的条件取决于用于获取页面的方法。例如，如果Ajax调用如下所示：

xmlhttp.open("GET","toy_search.jsp?query="+str+"&format=fragment",true);

由于URL的&format=fragment部分，您会隐藏HTML，只留下应该注入结果div的HTML。在正常（非Ajax）使用中，页面最初打开或者有直接链接到搜索结果，URL的&format=fragment部分将不存在，用户将加载整个页面

AJAX返回整个网页

2 个答案: