In this section, you will learn how to refresh jsp page using javaScript.
In this section, you will learn how to refresh jsp page using javaScript.In this section, we develop an User Login application . We created five file sign.jsp,signout.jsp,user_register.jsp,userlogin.jsp and useradd.jsp.
Brief description of the flow of the application:
Step 1: Create a web page(sign.jsp) to show a button to Login user.
<%@ page import="java.sql.*" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script> function signout() { window.location.href="signout.jsp"; } </script> </HEAD> <BODY> <br><br><br><br><br> <table width="250px" align="center" bgcolor="#CDFFFF" border=0 style="border:1px solid;"> <% if(session.getAttribute("username")!=null && session.getAttribute("password")!=null) { String username=""; String pass=""; Connection conn = null; String url = "jdbc:mysql://localhost:3306/"; String dbName = "user_register"; String driver = "com.mysql.jdbc.Driver"; String userName = "root"; String password = "root"; String data = ""; int sumcount=0; Statement st; try { Class.forName(driver).newInstance(); conn = DriverManager.getConnection(url+dbName,userName,password); username = session.getAttribute("username").toString(); pass = session.getAttribute("password").toString(); String query = "select * from userregister where username='"+username+"' and password='"+pass+"'"; st = conn.createStatement(); ResultSet rs = st.executeQuery(query); if(rs.next()) { %> <tr><td colspan=3 align="center"><b>User Details</b></td></tr> <tr><td><b>User Name </b></td><td><b>:</b></td><td><%=rs.getString(2)%></td></tr> <tr><td><b>First Name </b></td><td><b>:</b></td><td><%=rs.getString(4)%></td></tr> <tr><td><b>Last Name </b></td><td><b>:</b></td><td><%=rs.getString(5)%></td></tr> <tr><td><b>City </b></td><td><b>:</b></td><td><%=rs.getString(6)%></td></tr> <tr><td><b>State </b></td><td><b>:</b></td><td><%=rs.getString(7)%></td></tr> <tr><td><b>Country</b></td><td><b>:</b></td><td><%=rs.getString(8)%></td></tr> <% } out.println(data); } catch (Exception e) { e.printStackTrace(); } %> <tr> <td align="center" colspan=3> <input type="button" name="signout" value="Sign Out" onclick="signout();"> </td> </tr> <% } else { %> <tr><td colspan=2> </td></tr> <tr><td colspan=2 align="center"><b>To Login User Click on Sign In</b></td></tr> <tr><td colspan=2> </td></tr> <tr> <td colspan="2" align="center"> <input type="button" name="signin" value="Sign In" onClick="window.open('userlogin.jsp','mywindow','width=500, height=350,toolbar=no,resizable=yes,menubar=yes')"> </td></tr> <tr><td colspan=2> </td></tr> <% } %> </table> </BODY> </HTML>
Step:2Create a web page (userlogin.jsp) to User Login.
<html> <head> <style> a{ font: bold 13px Verdana; padding: 2px; padding-left: 4px; display: block; width: 100px; color: black; text-decoration: underline; } a:hover{ color: black; text-decoration: none; } </style> <script> function validate() { if(document.frm.username.value=="") { alert("Please enter username"); document.frm.username.focus(); return false; } if(document.frm.password.value=="") { alert("Please enter username"); document.frm.password.focus(); return false; } return true; } function trim(stringToTrim) { return stringToTrim.replace(/^\s+|\s+$/g,""); } function login() { if(validate()) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var username =document.getElementById("username").value; var password =document.getElementById("password").value; var url="userloginmid.jsp" url=url+"?username="+username+"&password="+password; //alert(url); xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { var showdata = xmlHttp.responseText; var str = showdata.toString(); if(trim(str)=="successLogin") { window.opener.location.reload(); window.location.reload(); window.close(); } else { window.location.href="userlogin.jsp?errmsg=error"; } } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </script> </head> <body> <br><br> <% String errmsg=""; if(request.getParameter("errmsg")!=null && request.getParameter("errmsg")!="") { errmsg ="Invalid username and password"; } %> <form name="frm"> <table border="0" width="400px" align="center" bgcolor="#CDFFFF"> <tr><td colspan=2 align="center" style="color:red;"><%=errmsg%></td></tr> <tr><td colspan=2 align="center"> </td></tr> <tr><td colspan=2 align="center"><b>User Login</b></td></tr> <tr><td>Username : </td><td><input type="text" name="username" id="username"></td></tr> <tr><td>Password : </td><td><input type="password" name="password" id="password"></td></tr> <tr><td colspan=2 align="center"><input type="button" name="submit" value="Submit" onclick="login();"></td></tr> <tr><td colspan=2 align="center"><a href="user_register.jsp">New User</a></td></tr> </form> </body> </html>
Step 3:Create a web page (userloginmid.jsp) to retieve the details of selected
user.
<%@ page import="java.sql.*" %> <% String username = request.getParameter("username").toString(); String pass = request.getParameter("password").toString(); Connection conn = null; String url = "jdbc:mysql://localhost:3306/"; String dbName = "user_register"; String driver = "com.mysql.jdbc.Driver"; String userName = "root"; String password = "root"; String data = ""; int sumcount=0; Statement st; try { Class.forName(driver).newInstance(); conn = DriverManager.getConnection(url+dbName,userName,password); String query = "select count(*) from userregister where username='"+username+"' and password='"+pass+"'"; st = conn.createStatement(); ResultSet rs = st.executeQuery(query); if(rs.next()) { System.out.println(query); if(rs.getInt(1)>0) { session.setAttribute("username",username); session.setAttribute("password",pass); data = "successLogin"; } } out.println(data); } catch (Exception e) { e.printStackTrace(); } %>
Step 4:Create a web page (useradd.jsp) to add new user.
<%@ page import="java.sql.*" %>
<%
String username = request.getParameter("username").toString();
String pass = request.getParameter("password").toString();
String first_name = request.getParameter("first_name").toString();
String last_name = request.getParameter("last_name").toString();
String city = request.getParameter("city").toString();
String state = request.getParameter("state").toString();
String country = request.getParameter("country").toString();
String data="";
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "user_register";
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 = "insert into userregister set username='"+username+"',password='"+pass+"',first_name='"+first_name+
"',last_name='"+last_name+"',city='"+city+"',state='"+state+"',country='"+country+"'";
System.out.println("query : " + query);
st = conn.createStatement();
int i = st.executeUpdate(query);
if(i>0)
{
data ="successAdd";
}
out.println(data.trim());
}
catch (Exception e) {
e.printStackTrace();
}
%>
Successful Output of the program:
Click on Sign In to Login User:
Output when Successfully Submit the User Login refresh the parent window and show the user details.
For New User.
Download the full web application shows here.
Ads