利用json和prototype來做用戶是否正確的判斷,傳統的方式是提交後做判斷,這裏使用的是ajax異步傳輸的方式。

利用json和prototype來做用戶是否正確的判斷,傳統的方式是提交後做判斷,這裏使用的是ajax異步傳輸的方式。
所需文件
  1.UserLogin_JSON.jsp           (主要頁面,在IE中基本中出現這個頁面,其它的處理都在後臺不可見)
  2.check_login_user.jsp         (這個做爲判斷用戶名是否正確的文件,可以寫成jsp,servlet,在struts2中就可以爲一個action)
  3.AjaxMessageJson.java         (將java對象轉成json數據格式,需要用到org.json,json-lib.jar)
  4.js/prototype.js              (這是js/prototype的庫,網上隨處可下)
  5.json.js                      (用來解析得到的responseText,否則客戶端得到的是html格式的文件)
1.UserLogin_JSON.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<html>
  <head>
    <title>用戶登錄測試json返回數據格式</title>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/comm.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
  var flagSubmit = false ;
  function checkUserName() {
  //var contextPath = "<%=request.getContextPath()%>";
  var url = "check_login_user.jsp";
  var pars = "username=" + $('username').value;
  var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars,onLoading  : loading,onFailure:reportError,onComplete: done});
}
function loading()
{
 // alert('正在調用');
}
function done(res) {
  resText = res.responseText;
  alert(resText);
  var jsonMsgObj = new JsonMsgObj(resText);
  var message = jsonMsgObj.getMessage();
  alert(message);
}
function reportError(request)
{
  alert('Sorry. There was an error.');
}
</script> 
  </head>
 
  <body>
<form action="sub.jsp" method="post" name="form1">
 用戶名:<input type="text" name="username""/><br>
 <input type="button" name="button" value="" onclick="checkUserName()">
</form>
  </body>
</html>

2.check_login_user.jsp  //註釋:注意不要出現任何html的標籤,這裏只做一個簡單的判斷,可以方便的擴充爲數據庫判斷

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ page import=" com.shangyu.json.AjaxMessageJson"%>
<%
String username=request.getParameter("username");
//System.out.println("執行後臺:"+username);
AjaxMessageJson ajaxMessagesJson=new AjaxMessageJson();
if(username.equals("fly"))
      ajaxMessagesJson.setMessage("E_USERNAME_001", "用戶名正確!");
else
    ajaxMessagesJson.setMessage("E_USERNAME_001", "用戶名不太正確!");
out.println(ajaxMessagesJson.getJsonString());
%>


3.AjaxMessageJson.java

package com.shangyu.json;
import org.json.*;

public class AjaxMessageJson {

 private JSONObject json = new JSONObject();

 public void setMessage(String codeid, String message) {
  try {
   this.json.put("codeid", codeid);
   this.json.put("message", message);
   this.json.put("text", "");
  } catch (JSONException e) {

  }
 }

 public void setMessage(String codeid, String message, String text) {
  try {
   this.json.put("codeid", codeid);
   this.json.put("message", message);
   this.json.put("text", text);
  } catch (JSONException e) {

  }
 }

 public String getJsonString() {
  return this.json.toString();
 }
}


當然如果僅僅只需要做一個用戶名是否存在或正確的判斷,完全可以不需要用到json來做數據格式的傳輸,直接利用html文本方式來就可以了。

但是如果要傳輸更爲複雜一些的數據,則可以利用XML和json,但由於xml在客戶端解析的複雜性,現在要實現ajax功能,普遍傾向於使用json

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章