AJAX简单的用户注册

最新推荐文章于 2024-08-31 09:23:33 发布

jianchibuxie5

最新推荐文章于 2024-08-31 09:23:33 发布

阅读量440

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest html function microsoft input

本文链接：https://blog.csdn.net/jianchibuxie5/article/details/6428452

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天张老师讲了简单使用ajax的用户注册校验，要实现一下的一些功能：要有用户名是否为空的校验。有确认密码与密码的匹配校验。
package com.ajax.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class RegUserUIAction extends Action {

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>

    <title>logon.jsp</title>
   <script type="text/javascript">
function verifyUserName(userName)
{
  var url = '<html:rewrite action="/RegUserUI"/>' + '?username=' + userName;
  window.location.href = url;
}
</script>

</head>

<body>

    <form method="post">
    用户名：<input type="text" id="username" name="username" value="${param.username }"/><a href="javascript:verifyUserName(document.getElementByIdx('username').value);void(0)">校验是否重名</a><br>
    <div>${msg}</div>
    密码： <input type="password" name="password"><br>
    确认密码：<input type="password" name="password" /><br>
    <input type="submit" name="password" value="注册" />
    </form>
</body>
</html:html>

struts-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">

<struts-config>
<data-sources />
<form-beans />
<global-exceptions />
<global-forwards />
<action-mappings >
    <action
      path="/RegUserUI"
      type="com.ajax.action.RegUserUIAction"
      validate="false">
      <forward name="logon" path="/WEB-INF/jsp/logon.jsp" />
    </action>

</action-mappings>

<message-resources parameter="com.ajax.ApplicationResources" />
</struts-config>
上面的一段是javascript的校验，并没有用到AJAX，内容还算是比较简单的！

下面这段用到了AJAX,张老师是用的prototype框架，现在比如像sina的邮箱网页就是用的这个框架的！
<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
<head>
<title>logon.jsp</title>
    <script type="text/javascript" src="${pageCotext.request.contextPath}/js/prototype.js"></script>
   <script type="text/javascript">
function verifyUserName2(userName)
{
  new Ajax.Updater('result',
  '<html:rewrite action="/RegUserUI"/>',
  {
   parameters: { username: $('username').value }
   });




}
注：上面的function是在prototype文档里面查的。直接copy过来修改下的。在ajax.update的里面的。通过跟着张老师的学习
渐渐的开始有了查找文档的习惯。
function verifyUserName(userName)
{
  var url = '<html:rewrite action="/RegUserUI"/>' + '?username=' + userName;
  //window.location.href = url;
  var xhr = createXHR();
  xhr.onreadystatechange = function(){
     //alert(xhr.responseText);
     //alert(xhr.readyState);
     if(xhr.readyState == 4 && xhr.status == 200)
     {
      document.getElementByIdx("result").innerHTML = xhr.responseText;
     }
    };
  xhr.open('GET',url,true);
  xhr.send();
}
这下面的一段function是判断是否支持浏览器版本的！
function createXHR(){
  var xmlhttp = null;
  if(window.XMLHttpRequest){
   this.xmlhttp = new XMLHttpRequest();
   if(window.overrideMineType){
    xmlhttp.overrideMimeType("text/xml");
   }
  }else if(window.ActiveXObject){
   var microsoft = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
   "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
   "MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
    for(var i=0; i<microsoft.length; i++){
     try{
      xmlhttp = new ActiveXObject(microsoft[i]);
      break;
     }catch(e){
     }
    }
  }else{
   alert("Can't Create XMLHttpRequest Object");
  }
  return xmlhttp;
}
</script>
</head>

<body>

    <form method="post">
    用户名：<input type="text" id="username" οnblur="verifyUserName2(this.value)" name="username" value="${param.username }"/><a href="javascript:verifyUserName(document.getElementByIdx('username').value);void(0)">校验是否重名</a><br>
    <div id="result">${msg}</div>
    密码： <input type="password" name="password"><br>
    确认密码：<input type="password" name="password" /><br>
    <input type="submit" name="password" value="注册" />
    </form>
</body>
</html:html>

package com.ajax.action;

import java.io.IOException;

public class RegUserUIAction extends Action {

public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {
  // TODO Auto-generated method stub
  String userName = request.getParameter("username");
  if(userName != null){
  String msg = "恭喜您，用户未被注册！";
  if("hhl".equals(userName)){
   msg = "很遗憾，用户名已被注册";
  }
  //request.setAttribute("msg", msg);
  response.setContentType("text/plain;charset=UTF-8");
  try {
   response.getWriter().print(msg);
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return null;
  }
  return mapping.findForward("logon");
}
}
使用AJXA和js最后得到的是一样的结果的！当然现在主流的ajax框架还有jquery。只要会了一种，其他的都可以触类旁通的！

jianchibuxie5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX简单的用户注册

<br />今天张老师讲了简单使用ajax的用户注册校验，要实现一下的一些功能：要有用户名是否为空的校验。有确认密码与密码的匹配校验。<br />package com.ajax.action;<br />import javax.servlet.http.HttpServletRequest;<br />import javax.servlet.http.HttpServletResponse;<br />import org.apache.struts.action.Action;<br />impor
复制链接

扫一扫

专栏目录