Home > Article > Web Front-end > jQuery implements Ajax to verify username uniqueness

jQuery implements Ajax to verify username uniqueness

小云云Original: 2018-01-06 09:47:312362browse

This article mainly shares with you jQuery to implement Ajax to verify the uniqueness of user names. This article is divided into jsp code and background code to introduce to you the Ajax verification of user names based on jQuery. It is very good and has reference value. It is needed Friends, please refer to it, I hope it can help everyone.

JSP part code:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <%@include file="/common/header.jsp"%>
  <title>用户管理</title>
  <script type="text/javascript">
    function doVerify(){
      //获取界面的账号
      var account = $("#account").val();
      //获取账号后的提示信息文本
      var accountText = document.getElementById("accountText");
      //如果账号输入不为空，执行该方法
      if(account !=""){
        $.ajax({
          url:"${basePath}nsfw/userAction_verifyAccout.action",//后台查询验证的方法
          data:{"user.account": account},//携带的参数
          type: "post",
          success: function(msg){
            //根据后台返回前台的msg给提示信息加HTML
            if("true" !=msg){
              // 账号已经存在
              accountText.innerHTML = "<font color=&#39;red&#39;>抱歉，"+account+"已被注册，请更换！</font>"
            }
            else{
              // 账号不存在
              accountText.innerHTML = "<font color=&#39;green&#39;>恭喜，"+account+"可以注册！</font>"
            }
          }
        });
      }
    }
  </script>
</head>
<body class="rightBody">
<tr>
      <td class="tdBg" width="200px">帐号：</td>
      <td><s:textfield name="user.account" id="account" onchange="doVerify()"/>
        <span id="accountText"></span>
      </td>
    </tr>
</body>

Backend code:

public class UserDAOImpl extends BaseDaoImpl<User> implements UserDAO {
  /**
   * 校验账号唯一性
   */
  @Override
  public List<User> findObjectByAccountAndId(String id, String account) {
    StringBuilder hqlStr = new StringBuilder("FROM User t WHERE t.account = ?");
    if (StringUtils.isNotBlank(id)) {
      hqlStr.append(" AND t.id=?");
    }
    Query query = getSession().createQuery(hqlStr.toString());
    query.setParameter(0, account);
    if (StringUtils.isNotBlank(id)) {
      query.setParameter(1, id);
    }
    return query.list();
  }

Rendering:

Related recommendations:

Detailed example of jQuery disabling form username and password autofill function

AJAX detects whether the user name is unique

Examples explain the tradition of ajax user name verification and the $.post method of jquery

The above is the detailed content of jQuery implements Ajax to verify username uniqueness. For more information, please follow other related articles on the PHP Chinese website!

jquery ajax

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery open source component BootstrapValidatorNext article：Detailed explanation of jQuery open source component BootstrapValidator

See more

jQuery implements Ajax to verify username uniqueness

Related articles