Ajax验证用户的唯一性

针对初学者,学习Ajax验证用户的唯一性实战是为了巩固Ajax,Jquery,Json与Struts2基础知识,具体内容如下

浏览效果图:

那我们就开始了,操作步骤如下

1.首先我们先导入所需要的包及文件

Json 包:

struts2 包:

引入jquery-2.1.1.min.js文件。

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

2.然后,我们需要在web.xml 文件中,配置Struts2过滤器

<filter>
 <filter-name>struts2</filter-name>
 <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>struts2</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>

3.然后,开始编写我们的login.jsp页面,当然大家可以对他加一些CSS样式,使其更加美观。(我只简单做了一下,有点Low)

<div class="row">
 <h1>Ajax+Jquery验证用户的唯一性</h1>
 <form action="" method="post">
  <h3>名字:</h3>
  <input type="text" id="name" class="form-control" name="user.name" id="name" placeholder="请输入你的用户名">
  <br><br>
  <input type="submit" class="btn btn-success" value="验证用户的唯一性"/>    
  <span id="namemsg"></span>
 </form>
</div>

4.然后,我们开始写Action了。

//验证用户的唯一性
public void isexist() throws IOException {
  boolean exist = name.equals("张三") ;
  JSONObject result=new JSONObject();
  if(exist){
   result.put("exist", true);
  }else{
   result.put("exist", false);
  }
  ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
  PrintWriter out=ServletActionContext.getResponse().getWriter();
  out.println(result.toString());
  out.flush();
  out.close();
 }

5.最后,编写Struts.xml文件

<package name="user" namespace="/" extends="struts-default">
 <action name="user_*" class="com.ddge.action.UserAction" method="{1}">
  <result name="error">/login.jsp</result>
 </action>
</package>

总结

开始部署,测试!效果是不是就出来了。

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • Ajax 用户名验证是否存在

    客户端收集表单信息. 使用XMLHttpRequest对象提交到服务器. 服务器完成验证的逻辑,返回结果信息. 浏览器端根据服务器返回的信息对用户做出一定的提示. 不过由于我的空间不支持任何服务器段语言,所以把本应在服务器的逻辑搬到了浏览器,由JavaScript来做,服务器只负责提供一个用户名的列表.最后的效果如下,试着输入test,cainiao8这些用户名,都会显示已注册. JavaScript代码分析 首先,当文档载入完毕的时候,给表格设置change事件的响应函数ajaxValidat

  • asp.net结合Ajax验证用户名是否存在的代码

    1, 使用JavaScript js文件,验证用户名是否存在 复制代码 代码如下: var ajax = function(option) { var request; var createRequest = function() { //var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { try { request = new ActiveXObject("Microsoft.XM

  • 基于jQuery实现的Ajax 验证用户名是否存在的实现代码

    实例: 1.请求页面AJax.aspx HTML代码 复制代码 代码如下: <div> <input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> <div id="show

  • Ajax实现异步刷新验证用户名是否已存在的具体方法

    都是简单的实例,所以直接发代码 静态页面Ajax.html 复制代码 代码如下: <html>    <head>        <title>Ajax</title>        <script type="text/javascript">            function loadXMLDoc() {                if (document.getElementById("account

  • jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名,操作如下:新建一个输入页面,起名为input.jsp, 复制代码 代码如下: <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</title> <meta http-equiv="Content-Type&qu

  • jQuery.ajax 用户登录验证代码

    复制代码 代码如下: $.ajax({ type: "post", url: "Handler1.ashx", data: { username: "admin", password: "123" }, success: successHandle }); function successHandle(rep) { $("#msg").html(rep); }

  • Ajax实时验证用户名/邮箱等是否已经存在的代码打包

    今天分享一个"利用Ajax技术来检测用户名是否存在"的例子. 利用Ajax技术来检测用户名是否存在的原理流程图: 最终结果截图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • AJAX 用户唯一性验证实现代码

    从数据库my中的username用户表里验证: checkusername.html: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)

    前 言 直接上代码有点不厚道.于是按照天朝传统,整段描述吧....(本人语言表达能力有限,大家忍着看) 功 能 在网站注册用户时使用,主要为了无刷新异步验证用户输入的用户名或者Email是否已注册. 这功能大家肯定见过,大多数网站都有的,我一直对这个功能很感兴趣,所以这几天研究了下 jQuery + Ajax 整了一个功能不算完善,但足以应付普通使用的代码 (更牛的功能大家自己去发掘) 文 件 说 明 reg.php //为注册页面 check_user.php //为用户验证页面 (GET,P

  • Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)

    其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal

随机推荐