How to show value from database in jsp without refreshing page with ajax

I'm more recent Ajax

Ajax

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>

servlet

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

How can I pass the servlet value to jsp. Please help me? or please provide some useful tutorial links.

+5
source share
3 answers

You must make the following changes: - In the servlet: - Set the type of response content as: - response.setContentType("text/xml");at the top of the servlet. Having established this, we can send the response in XML format, and, having received it on JSP, we will receive it based on the name of the XML tag.

Perform whatever operation you want in the servlet ... Save the value for ex-

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

Now we will go to the JSP page where we must display the data.

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

And here you are done. :)

+4

1. -

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

2. jquery?

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

+2

, , , , javascript Ajax, javascript-, jQuery Ajax.

javascript , .

XHTTP, , , -.

, , jQuery, .

, .

+2
source

All Articles