2012-01-18 11 views
9

JSPでAJAXを学ぼうとしていて、次のコードを書いています。これは動作していないようです。親切に助け:JSPを使ったシンプルなAJAX

は、これが私のconfiguration_page.jspである。これは、私が上記のAJAXコードからアクセスしようとしている私のget_configuration.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> 

:私はjQuery AJAXを使用していた

<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

なしで実行されます

。それは '

'を含んでいなければなりません。あなた自身の好意を持ち、jQueryを使いましょう。 –

+0

また、jQueryを使用することをお勧めします。構文とクロスブラウザーの移植性がより簡単です。 – Dims

答えて

1

「configuration_page.jsp」ファイルで間違っています。 ここで、このファイルには、関数loadXMLDoc()の行番号2のようにする必要があります:あなたは<select>タグ内のみname属性を宣言しているので、

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

。ですから、この要素を名前で取得する必要があります。これを修正した後、それはget_configuration.jspの結果はdiv要素のコンテンツとして使用されている場合、それは ``、 ``、 ``を含めることはできません任意のJavaScriptエラー

12

AJAXリクエストを作成します。

次のコードをチェックしてください:

<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 JS関数は、それ以外の場合は、ポストバックになり、falseを返す必要があります。

関連する問題