1. 程式人生 > >ajax提交form表單到servlet,網頁的跳轉

ajax提交form表單到servlet,網頁的跳轉

jsp介面如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link  rel="stylesheet"  type="text/css"  href="css/styleA.css"  id="sc1"/>
<link  rel="stylesheet"  type="text/css"  href="css/index1.css"   id="sc2"/>


<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.4.js"></script>


<title>Insert title here</title>
<style>
body{background:#D0D0D0;}
</style>
<title>Insert title here</title>
<% //同樣實現取消客戶端快取
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
String name="loginCode";
%>
<script>
$(function(){
   $("#button").click(function(){
var dldata="";
dldata={"username":$("#username").val(),"password":$("#password").val(),"role":$("#role").val(),"code":$("#code").val()};
var data=JSON.stringify(dldata);
alert(data);
$.ajax({
type:"POST",
contentType:"application/json",
url:"LoginServlet",
data:data,
dataType:"json",
success:function(data){
// $('#new_book').clearForm(); //清空表單
if(data.Status=="1"){
alert("登入成功!");
window.location.href="StudentRegister.jsp";
}
},
error:function(e){
alert("登入失敗");
}
 });

});
});
/* --------登入註冊結束-------- */
</script>
<script type="text/javascript">
/*-------------登陸驗證是否有空值---------*/

      function myCheck()
      {
     
        for(var i=0;i<document.denglu.elements.length-1;i++)
        {
         if(document.denglu.elements[i].value=="")
         {
           alert("當前目錄不能有空項");
           document.form1.elements[i].focus();
           return false;
         }
         
        }
        return true;
        
      }
      /*-------------登陸驗證是否有空值結束---------*/
</script>
<script type="text/javascript">
function loadimage(){  
        document.getElementById("randImage").src = "image.jsp?"+Math.random();  
    } 
 </script>    
</head>
<body>
<div class="login-container" style="margin-top:150px;" align="center">
<h1 style="color:#F0F0F0;">歡迎登入</h1>
<div style="margin-top:40px;">
<form  action="#" method="post" id="loginForm">
<div>
學號<input type="text" id="username" name="username" class="text"  />
</div>


<div style="margin-top:20px;">
密碼<input type="password"  id="password" name="password"  class="password" />
</div>
<div style="margin-top:10px;">
驗證碼<input type="text" id="code"  size="4">
<img onclick="javascript:loadimage();" name="randImage" id="randImage" src="image.jsp"/>
</div>
</form>
<div style="margin-top:20px;">
身份;<select  id="role"> 
<option value="student" >學生</option>
<option value="teacher" >教師</option>
<option value="manger" >管理員</option>
</select>
    </div>
   
    </div>
<div style="margin-top:20px;">
<input type="button" id ="button"value="登入" style="width:50px;height:28px;" class="button" onclick="validate();" />


</div>


<div style="margin-top:20px;">
<a href="#" class="hvr-sweep-to-right">忘記密碼?</a><br>
<a href="StudentRegister.jsp" class="hvr-sweep-to-right">點此進行學生註冊</a><br>
<a href="TeacherRegister.jsp" class="hvr-sweep-to-right">點此進行教師註冊</a>
</div>


</div>
</body>

</html>

servlet如下:

package b505.zlc.homework.servlet;


import java.io.IOException;
import java.io.PrintWriter;


import javax.mail.Session;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


import net.sf.json.JSONObject;


import b505.zlc.homework.bean.Manger;
import b505.zlc.homework.bean.Students;
import b505.zlc.homework.bean.Teachers;
import b505.zlc.homework.daoimpl.MangerDaoImpl;
import b505.zlc.homework.daoimpl.StudentsDaoImpl;
import b505.zlc.homework.daoimpl.TeacherDaoImpl;


import b505.zlc.homework.tools.ReadJSON;


public class LoginServlet extends HttpServlet {


/**

*/
private static final long serialVersionUID = 1L;


/**
* 控制使用者的登入
*/

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("執行了嗎");
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
response.setCharacterEncoding("UTF-8");
@SuppressWarnings("unused")
PrintWriter out=response.getWriter();
//bl用於boolean方法的
boolean bl=false;
StudentsDaoImpl sdi=new StudentsDaoImpl();
TeacherDaoImpl  tdi=new TeacherDaoImpl();
MangerDaoImpl mdi=new MangerDaoImpl();
Students st=new Students();
Teachers tr=new Teachers();
Manger mr=new Manger();

ReadJSON rj=new ReadJSON();
String dataString=rj.readJSONString(request);
System.out.println("dataString---->"+dataString);
   JSONObject jsonObject=new JSONObject();
JSONObject json=JSONObject.fromObject(dataString);
   //System.out.println("dataString---->"+dataString);
   String role=json.getString("role");
   System.out.println("role--->"+role);
   String u=json.getString("username");
   String p=json.getString("password");
   String code=json.getString("code");
   String codeString=(String)request.getSession().getAttribute("sRand");
   System.out.println(code);
   System.out.println(codeString);
   if(role.equals("student")){
   bl=sdi.check(u, p);
   if(bl){
   st.student(u, p);
   request.getSession().setAttribute("studentinformation",st );
   System.out.println("使用者合法,可以登入");
   jsonObject.put("Status", "1");
   out.print(jsonObject.toString());
   //System.out.println(jsonObject.toString());
   //request.getRequestDispatcher("index.jsp").forward(request, response);
   }else{
   jsonObject.put("Status", "0");
   out.print(jsonObject.toString());
   //request.getRequestDispatcher("Login.jsp").forward(request, response);
   }
   }
   
   if(role.equals("teacher")){
   bl=sdi.check(u, p);
   if(bl){
   tr.teacher(u, p);
   request.getSession().setAttribute("teahcerInfor", tr);
   
   request.getRequestDispatcher("").forward(request, response);
   }else{
   request.getRequestDispatcher("Login.jsp").forward(request, response);
   }
   }
   
   if(role.equals("manger")){
   if(mdi.check(u, p)){
   request.getRequestDispatcher("").forward(request, response);
   }else{
   request.getRequestDispatcher("Login.jsp").forward(request, response);
   }
   }
   
  
   
}


/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.

* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}


}

第一次接觸ajax(我還是個新手)以為在servlet中用request就能開啟實現頁面的跳轉,自己研究了半天都沒成功,後得高人相助,原來就是用request請求,會與前天產生衝突,所以沒有成功。自己水平低,第一次寫部落格,如有不妥,還望賜教!