AJAX renvoie la page web entière

J'utilise Ajax pour faire une recherche en direct et tout ce que je veux c'est que les données soient affichées dans un div appelé "résultats". Toutefois, lors de la recherche, le formulaire de recherche s'affiche à nouveau, puis les résultats div. Comment puis-je résoudre ce problème? Voici le code ajax:AJAX renvoie la page web entière

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(); 
}

J'ai ajouté la page de recherche ici:

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

Source

2010-10-16 Bat_Programmer

Sans voir le reste de votre code, il est difficile de dire. Si vous voulez supprimer le champ de recherche de la page et juste afficher les résultats, je suggère quelque part dans la fonction suivante que vous ajoutez une ligne de javascript qui met à jour le style css sur votre div de recherche pour afficher: caché.

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

Source

2010-10-16 03:50:37 user477685

J'ai ajouté la page de recherche maintenant. –

Donc, vous voulez effectuer une recherche sur chaque touche, puis une fois que l'utilisateur a fini de chercher, le champ de recherche devrait disparaître? – user477685

oui mais le champ de recherche apparaîtra toujours, seulement les résultats devraient apparaître sous le champ de recherche. –

Vous demandez une page Web complète avec votre appel Ajax, et vous obtenez un retour. Cela fonctionne comme prévu, comme on dit. Le problème n'est pas avec votre Ajax, mais avec ce que vous retournez du serveur. Vous devriez renvoyer des données de résultats de recherche, et non une page Web contenant des données de résultats de recherche. Rendre l'affichage des éléments HTML statiques sur la page conditionnel à la méthode utilisée pour obtenir la page. Par exemple, si l'appel Ajax ressemblait à ceci:

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

vous cacher le code HTML serait à cause de la &format=fragment partie de l'URL, vous laissant avec seulement le code HTML qui doit être injecté dans les résultats div. En utilisation normale (non-Ajax), où la page est soit ouverte au début, soit il y a un lien direct vers les résultats de recherche, la partie &format=fragment de l'URL ne sera pas présente et l'utilisateur chargera la page entière.

Source

2010-10-16 05:09:26

Salut, j'ai essayé cela, mais encore, il renvoie une page Web entière. Toute autre solution? –

Pourriez-vous nous montrer comment vous cachez le HTML extrané? –

exactement comme vous l'avez suggéré ci-dessus ou est-ce autre chose? –

AJAX renvoie la page web entière

Répondre

Questions connexes