5

私はアヤックス初心者です

アヤックス

function ajaxFunction() {
  if(xmlhttp) { 
   var txtname = document.getElementById("txtname");
    xmlhttp.open("POST","Namelist",true);

    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("txtname=" + txtname.value); 
  }
}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText;
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}

jsp

<form name="fname" action="Namellist" method="post">

    Select Category :
    <select name="txtname" id="txtname">
     <option value="Hindu">Hindu</option>
     <option value="Muslim">Muslim</option>
     <option value="Christian">Christian</option>
    </select>
    <input type="button" value="Show" id="sh" onclick="ajaxFunction();">
    <div id="message">here i want to display name</div><div id="message1">here i want to display meaning</div>
    </form>

サーブレット

String ct=null;  
ct=request.getParameter("txtname");
      Connection con=null;
      ResultSet rs=null;
      Statement st=null;
try{
con=Dbconnection.getConnection();
PreparedStatement ps=con.prepareStatement("select name meaning from (select * from namelist order by dbms_random.value)where rownum<=20 and category='+ct+'" );
rs=ps.executeQuery();

 out.println("name" + rs);
 **Here I have confusion,**

}
catch(Exception e)
{
    System.out.println(e);
}

サーブレットの値をjspに表示するにはどうすればよいですか。私を助けてください？または、いくつかの優れたチュートリアル リンクを提供してください。

4

3 に答える 3

4

以下の変更を行う必要があります:- サーブレット内:- 応答コンテンツ タイプを次のように設定します:-response.setContentType("text/xml");サーブレットの上部セクション。これを設定することで、応答を XML 形式で送信できます。JSP で取得する際に、XML のタグ名に基づいて応答を取得します。

サーブレットで必要な操作を行います...例の値を保存します-

String uname=";
     uname="hello"; //some operation
    //create one XML string
    String sendThis="<?xml version='1.0'?>"
            +"<Maintag>"
            +"<Subtag>"
            +"<unameVal>"+uname+"</unameVal>"     
            +"</Subtag>"
            +"</Maintag>"
  out.print(sendThis);

次に、データを表示する JSP ページに移動します。

    function getXMLObject()  //XML OBJECT
        {
            var xmlHttp = false;
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
            }
            catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
                }
                catch (e2) {
                    xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
                }
            }
            if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
                xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
            }
            return xmlHttp;  // Mandatory Statement returning the ajax object created
        }
    var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object
        function ajaxFunction() {
            if(xmlhttp) {
                xmlhttp.open("GET","NameList",true); //NameList will be the servlet name
                xmlhttp.onreadystatechange  = handleServerResponse;

                xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xmlhttp.send(null);
            }
        }
        function handleServerResponse() {
            if (xmlhttp.readyState == 4) {
                if(xmlhttp.status == 200) {
                   getVal();
                }
                else {
                    alert("Error during AJAX call. Please try again");
                }
            }
        }
       function getVal()
        {
             var xmlResp=xmlhttp.responseText;
             try{

                if(xmlResp.search("Maintag")>0 )
                {
               var x=xmlhttp.responseXML.documentElement.getElementsByTagName("Subtag");
                    var xx=x[0].getElementsByTagName("unameVal"); 
                    var recievedUname=xx[0].firstChild.nodeValue;
                   document.getElementById("message").innerText=recievedUname;//here 
                } 
                }catch(err2){
                    alert("Error in getting data"+err2);
                }
        }

これで完了です。:)

于 2012-07-03T07:57:07.000 に答える
2

1.サーブレットコード内

PrintWriter output = response.getWriter();  
String result = "value";  
writer.write(result);  
writer.close()

2.なぜjqueryを使用しないのですか？
あなたはであなたのコードを置き換えることができます-

$.post('url', function(data) {  
$('#message1').html(data);  
});

クエリ投稿の例

于 2012-07-03T07:41:43.910 に答える
2

おそらくオフフックですが、Ajax呼び出し用のすべてのjavascriptを配置するのではなく、Ajax呼び出しを行うためのjavascriptライブラリ、できればjQueryを使用するのに役立ちます。

使用する JavaScript ライブラリは、コードをコンパクトで簡潔にするのに役立ち、ブラウザ間の互換性を維持するのにも役立ちます。

すべての XHTTP コードを自分で作成することを計画している場合、クロス ブラウザーの問題を修正するために多くの時間を費やすことになり、コードには実際のビジネス ロジックではなく多くのハックが含まれることになります。

また、jQuery のようなライブラリを使用すると、より少ないコード行数で同じことを実現できます。

それが役立つことを願っています。

于 2012-07-03T07:45:02.227 に答える