2012-01-18 12 views
9

Próbuję nauczyć się AJAX z JSP i napisałem poniższy kod. Wydaje się, że to nie działa. Życzliwej pomocy:Prosta AJAX z przykładem JSP

To mój configuration_page.jsp

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>JSP Page</title> 
    <script type="text/javascript"> 

     function loadXMLDoc() 
     { 
     var xmlhttp; 
     var config=document.getElementById('configselect').value; 
     var url="get_configuration.jsp"; 
     if (window.XMLHttpRequest) 
     { 
      xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     { 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange=function() 
     { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
      } 
     } 

     xmlhttp.open("GET", url, true); 
     xmlhttp.send(); 
} 
</script>   

</head> 

<body> 
    <h2 align="center">Saved Configurations</h2> 
    Choose a configuration to run: 
    <select name="configselect" width="10"> 
    <option selected value="select">select</option> 
    <option value="Config1">config1</option> 
    <option value="Config2">config2</option> 
    <option value="Config3">config3</option> 
    </select> 
    <button type="button" onclick='loadXMLDoc()'> Submit </button> 
    <div id="myDiv"> 
    <h4>Get data here</h4> 
    </div> 
</body> 
</html> 

To mój get_configuration.jsp który usiłuję dostępu z kodu AJAX powyżej:

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 

    </head> 
    <body> 

    <h4>Mee..</h4> 
    </body> 
</html> 
+0

Jeśli wynik get_configuration.jsp jest używany jako zawartość div, to nie powinna zawierać '' , '' '' . Powinien zawierać tylko '

'. Zrób sobie przysługę i użyj jQuery. –

+0

Proponujemy również użycie jQuery: ma prostszą przenośność składni i crossbrowser. – Dims

Odpowiedz

1

Robisz błąd w pliku "configuration_page.jsp". tutaj w tym pliku, funkcja loadXMLDoc() „s linii numer 2 powinno być tak:

var config=document.getElementsByName('configselect').value; 

bo zadeklarowały jedynie atrybut w tagu <select>name. Więc powinieneś dostać ten element po imieniu.

Po skorygowaniu tego, to będzie działać bez jakiegokolwiek błędu JavaScript

12

użyłem jQuery AJAX do żądaj AJAX.

Sprawdź następujący kod:

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#call').click(function() 
      { 
       $.ajax({ 
        type: "post", 
        url: "testme", //this is my servlet 
        data: "input=" +$('#ip').val()+"&output="+$('#op').val(), 
        success: function(msg){  
          $('#output').append(msg); 
        } 
       }); 
      }); 

     }); 
    </script> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>JSP Page</title> 
</head> 
<body> 
    input:<input id="ip" type="text" name="" value="" /><br></br> 
    output:<input id="op" type="text" name="" value="" /><br></br> 
    <input type="button" value="Call Servlet" name="Call Servlet" id="call"/> 
    <div id="output"></div> 
</body> 

0

loadXMLDoc funkcja JS powinno return false, w przeciwnym razie spowoduje to odświeżenie strony.