Share on Google+Share on Google+

virti shah
how to display jsp page containing mysql query in particular division using ajax ?my code is below bt i cundt get it properly
1 Answer(s)      5 years ago
Posted in : JavaScript Questions
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>

Ads

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:

<[email protected] 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     
          )









Related Tutorials/Questions & Answers:
Tutorials   
Java Spring Hibernate Struts Training code for programming How can I dynamically load user-entered data as content of jquery dialog? java webcam integration question java coding Fix Scrollbar position in a checkboxList after postback Information Save Alert Country wise redirection to files Interface in javascript connect database with javascript Zip Code ZipCode how to validate the email login How to play FLV video files on Ipad using HTML code or javascript code? Nitobi Grid is not working in IE10/IE11 jquery issue plese help RegEx Tree structure from json whose parents can be dragged and dropped from child newyorklife insurance getElementById not working javascript code for search in html file Implement The Skeleton Code Implement This Skeleton Code Mobile Automation using Appium Computer forensic application Java: Searching a string from doc files java linked list urgent !!! java linked list urgent!!! library management library management library management library management question Html form using JavaScript to display the table content java how to prevent no from unroundin off on clicking text box again in JSP and Jquery graph generation from xml design file display data from database in textbox when id entered in textbox Javascript Code for all fields how to get HTTP GET request value using javascript array Javascript Querry autocomplete(): Spring mvc with jquery: I am not getting correct value in the text filed. Please help me Create SpreadSheet same as excel using java applet Create SpreadSheet same as excel using java applet How to change focus among multiple select boxes? Write JQUERY Code Write JQUERY Code Converting jsp variable to java variable java

Ads

 
Advertisement null

Ads