calling servlet from JS and return response from servlet to JS

hello all,

I am working on JSP-servlets n MVC.I am facing a problem.

on the web page when user clicks on a button i am calling a javascript function(eg myFunc) which inturn calls a servlet(myServlet).servlet performs some DB related task.now i want this servlet(myServlet) to return a url(eg. pages/file.jsp) to the function myFunc and the myFunc will load that file(url) on the same webpage using Ajax.

i tried following:

in servlet::

String url = "loadData.jsp";

response.setContentType("text/plain");

response.getWriter().write(url);

in js function::

document.forms[0].action = "LoginDetailsServlet";

document.forms[0].submit();

var url = xhr.responseText;

loadDoc(url); //ajax goes here

but this is not working :(

any suggestions how can i do this???

thanks in advance!!!

View Answers

February 23, 2012 at 3:59 PM

1)application.jsp:

<%@ page import="java.sql.*" %>
<html>
<head>
<script language="javascript">
function editRecord(id){
    var f=document.form;
    f.method="post";
    f.action='http://localhost:8080/examples/jsp/edit.jsp?id='+id;
    f.submit();
}
function deleteRecord(id){
    var f=document.form;
    f.method="post";
    f.action='http://localhost:8080/examples/DeleteServlet?id='+id;
    f.submit();
}
</script>
</head>
<body>

<br><br>
<form method="post" name="form">
<table border="1">
<tr><th>Name</th><th>Address</th><th>Contact No</th><th>Email</th></tr>
<%
Connection con = null;
String url = "jdbc:mysql://localhost:3306/";
String db = "test";
String driver = "com.mysql.jdbc.Driver";
String userName ="root";
String password="root";

int sumcount=0;
Statement st;
try{
Class.forName(driver).newInstance();
con = DriverManager.getConnection(url+db,userName,password);
String query = "select * from employee";
st = con.createStatement();
ResultSet rs = st.executeQuery(query);
%>

<%
while(rs.next()){
%>
<tr><td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><%=rs.getString(4)%></td>
<td><%=rs.getString(5)%></td>
<td><input type="button" name="edit" value="Edit" style="background-color:#49743D;font-weight:bold;color:#ffffff;" onclick="editRecord(<%=rs.getString(1)%>);" ></td>
<td><input type="button" name="delete" value="Delete" style="background-color:#ff0000;font-weight:bold;color:#ffffff;" onclick="deleteRecord(<%=rs.getString(1)%>);" ></td>
</tr>
<%
}
%>
<%
}
catch (Exception e) {
e.printStackTrace();
}
%>
</table>
</form>
</body>
</html>

2)edit.jsp:

<%@page language="java"%>
<%@page import="java.sql.*"%>
<form method="post" action="../UpdateServlet">
<table border="1">
<tr><th>Name</th><th>Address</th><th>Contact No</th><th>Email</th></tr>
<%
String id=request.getParameter("id");
int no=Integer.parseInt(id);
int sumcount=0;
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "root");
String query = "select * from employee where id='"+no+"'";
Statement st = conn.createStatement();
ResultSet rs = st.executeQuery(query);
while(rs.next()){
%>
<tr>
<td><input type="text" name="name" value="<%=rs.getString("name")%>"></td>
<td><input type="text" name="address" value="<%=rs.getString("address")%>"></td>
<td><input type="text" name="contact" value="<%=rs.getInt("contactNo")%>"></td>
<td><input type="text" name="email" value="<%=rs.getString("email")%>"></td>
<td><input type="hidden" name="id" value="<%=rs.getString(1)%>"></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Update" style="background-color:#49743D;font-weight:bold;color:#ffffff;"></td>
</tr>
<%
}
}
catch(Exception e){}
%>
</table>
</form>
</form>

February 23, 2012 at 3:59 PM

continue...

3)UpdateServlet.java:

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;

public class UpdateServlet extends HttpServlet { 
        public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
String id=request.getParameter("id");
int no=Integer.parseInt(id);
String name=request.getParameter("name");
String address=request.getParameter("address");
int contact=Integer.parseInt(request.getParameter("contact"));
String email=request.getParameter("email");
try{
Connection conn = null;
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root", "root");
Statement st=null;
st=conn.createStatement();
st.executeUpdate("update employee set name='"+name+"',address='"+address+"',contactNo="+contact+",email='"+email+"' where id='"+no+"'");
response.sendRedirect("/examples/jsp/application.jsp");
}
catch(Exception e){
out.println(e);
    }
  }
}

4)DeleteServlet.java:

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;

public class DeleteServlet extends HttpServlet { 
    public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
String id=request.getParameter("id");
int no=Integer.parseInt(id);
int sumcount=0;
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "root");
Statement st = conn.createStatement();
st.executeUpdate("DELETE FROM employee WHERE id = '"+no+"'");
response.sendRedirect("/examples/jsp/application.jsp");
}
catch(Exception e){}
    }
}

February 24, 2012 at 10:54 AM

hi.. thanks for ur reply!! nice example but where the AJAX is coming into picture??? in above case the page reloaded again but i dont want the full page to be loaded again.i want servlet to return a xml file and load it through ajax!!