how to display jsp page containing mysql query in particular division using ajax ?my code is below bt i cundt get it properly

index.html
   <!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>

  <script language="javascript" type="text/javascript">
function diplayFunction(){
    var request;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        request = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                     request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    request.open("GET", "newjsp.jsp", true);

    // Create a function that will receive data sent from the server
    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status==200){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = request.responseText;
        }
    }


    request.send(null); 
}

//-->
</script>

<body>

    <form name="myform">

  <p>
      </br>
      </br>


  <label> Enter Employee name:</label>
  <input  name="ename" id="ename" type="text" size="30" maxlength="30" /></br>
  </p>
  <p >
     <input type="button" onclick="displayFunction()" value="submit" />
  </p>

</form>
<div id="ajaxDiv">Your result will display here</div>
    </body>
</html>


print("code sample");
newjsp.jsp




<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>

  <script language="javascript" type="text/javascript">
function diplayFunction(){
    var request;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        request = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                     request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    request.open("GET", "newjsp.jsp", true);

    // Create a function that will receive data sent from the server
    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status==200){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = request.responseText;
        }
    }


    request.send(null); 
}

//-->
</script>

<body>

    <form name="myform">

  <p>
      </br>
      </br>


  <label> Enter Employee name:</label>
  <input  name="ename" id="ename" type="text" size="30" maxlength="30" /></br>
  </p>
  <p >
     <input type="button" onclick="displayFunction()" value="submit" />
  </p>

</form>
<div id="ajaxDiv">Your result will display here</div>
    </body>
</html>

View Answers

March 21, 2012 at 12:00 PM

1)selectname.jsp:

<html>
<head>
<script type="text/javascript">
function showEmp(emp_value){ 
 if(document.getElementById("address").value!="-1"){
 xmlHttp=GetXmlHttpObject()
if (xmlHttp==null){
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getvalue.jsp"
url=url+"?name="+emp_value
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
else{
 alert("Please Select Employee Id");
}
}
function stateChanged(){ 
document.getElementById("email").value ="";
document.getElementById("address").value ="";
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
var showdata = xmlHttp.responseText; 
    var strar = showdata.split(":");
if(strar.length==1){
  document.getElementById("address").focus();
  alert("Please Select Employee Id");
  document.getElementById("email").value =" ";
document.getElementById("address").value =" ";
 }
 else if(strar.length>1) {
var strname = strar[1];
document.getElementById("address").value= strar[1];
document.getElementById("email").value= strar[2];
 }
 } 
}

function GetXmlHttpObject(){
var xmlHttp=null;
try{
 xmlHttp=new XMLHttpRequest();
 }
catch (e) {
 try {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
</script>
</head>
<body>
<form name="employee">
<br><br>
<table border="0" width="400px" align="center" bgcolor="#CDFFFF">
<div id="mydiv"></div>
   <tr><td><b>Select Employee Name</b></td><td> 
   <select name="name" onchange="showEmp(this.value);">
   <option value="-1">Select</option> 
<option value="Angelina">Angelina</option>
<option value="Martina">Martina</option>
<option value="Julia">Julia</option>
<option value="Angel">Angel</option>
 </select>
</td></tr>
<tr><td ><b>Employee Address:</b></td><td>
<input  type="text" name="address" id="address" value=""></td></tr>
<tr><td><b>Employee Email:</b></td><td>
<input  type="text" name="email" id="email" value=""></td></tr>

</table>
</form>    
<table border="0" width="100%" align="center">
<br>
<br>
</table>
</body>
</html>

2)getvalue.jsp:

<%@page import="java.sql.*"%>
<%
String emp_name = request.getParameter("name").toString();
String data="";
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "test";
String driver = "com.mysql.jdbc.Driver";
String userName = "root"; 
String password = "root";

int sumcount=0; 
Statement st;
try {
Class.forName(driver).newInstance();

conn = DriverManager.getConnection(url+dbName,userName,password);
String query = "select * from employee where name='"+emp_name+"'";

st = conn.createStatement();
ResultSet rs = st.executeQuery(query);
while(rs.next())
{
data = ":" + rs.getString("address") +":"+  rs.getString("email");
}
out.println(data);
}
catch (Exception e) {
e.printStackTrace();
}
%>

3)For the above code, we have created following table:

CREATE TABLE `employee` (               
            `id` bigint(255) default NULL,        
            `name` varchar(255) default NULL,     
            `address` varchar(255) default NULL,  
            `contactNo` int(255) default NULL,    
            `email` varchar(255) default NULL     
          )