Home >Web Front-end >JS Tutorial >Detailed explanation of duplicate user names using jQuery and Ajax

Detailed explanation of duplicate user names using jQuery and Ajax

小云云Original: 2018-01-10 11:18:031729browse

Using the jQuery framework, the underlying Ajax asynchronous technology is encapsulated, which can be achieved through simple method calls. This blog is about automatically detecting the problem of duplicate user names when users register. The technology used is Ajax asynchronous transmission. This article mainly introduces in detail jQuery Ajax to realize real-time detection of duplicate user names, and automatically detects the problem of duplicate user names when users register. It has certain reference value. Interested friends can refer to it. I hope it can Help everyone.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>

<body>
 <form action="login" method="post" id="myform">
  <table align="center">
   <tr>
    <td>用户名：</td>
    <td>
     <input type="text" name="name" id="username" title="用户名" />
     <p id="message"></p>
    </td>
   </tr>
   <tr>
    <td>密码：</td>
    <td><input type="password" name="pwd" id="userpwd" title="密码" />
    </td>
   </tr>
   <tr>
    <td>性别：</td>
    <td><input type="radio" name="sex" value="男" title="性别" />男 <input
     type="radio" name="sex" value="女" title="性别" />女</td>
   </tr>
   <tr>
    <td>年龄：</td>
    <td><input type="text" name="age" title="年龄" />
    </td>
   </tr>
   <tr>
    <td>Email:</td>
    <td><input type="text" name="email" title="Email" />
    </td>
   </tr>
   <tr>
    <td colspan="2" align="center"><input type="button" value="注 册"
     onclick="check()" /> <input type="reset" value="重 置" /></td>
   </tr>
  </table>
 </form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-3.2.1.js"></script>

<script type="text/javascript">
 // 检查表单元素的值是否为空
 function check() {
  var myform = document.getElementById("myform");
  for ( var i = 0; i < myform.length; i++) {
   if (myform.elements[i].value == "") {
    alert(myform.elements[i].title + "不能为空");
    myform.elements[i].focus();
    return;
   }
  }
  myform.submit(); // 表单中最后input提交标签用的是button类型，首先不提交表单，在js判断表单项都不为空时 再提交表单。
 }

 $(function(){
  $(":input[name=&#39;name&#39;]").blur(function(){
   var val = $(this).val();
   val = $.trim(val);

   if(val != ""){
    var url = "${pageContext.request.contextPath }/UserServlet"; // 将前端的业务转到后端Servlet来处理。最后Servlet再将结果返回给前端JSP页面
    var args = {"userName":val, "time":new Date()};

    $.post(url, args, function(data){ // URL中处理的结果都保存在data数据中，而data中的格式是Servlet中返回的结果格式，即为html
     $("#message").html(data);  //将data结果附加到p中
    });
   }
  });
 });
</script>
</html>

UserServlet Logic processing Servlet class, used to determine the user's duplicate name and output the response processing results, etc. The method for detecting duplicate names in the database is omitted (LoginDao.getInstance().checkUserName(userName.trim()); // Find whether the user name exists in the database)

package com.servlet.user;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.dao.LoginDao;
import com.user.UserInfo;

public class UserServlet extends HttpServlet {

 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

  response.setContentType("text/html; charset=UTF-8"); // 设置响应结果的格式为text/html，字符集为UTF-8
  response.setCharacterEncoding("UTF-8"); // 设置响应结果的字符编码为UTF-8
  // 禁止缓存
  response.setHeader("Cache-Control", "no-store,no-cache,must-revalidate");
  response.setHeader("Cache-Control", "post-check=0,pre-check=0");
  response.setDateHeader("Expires", 0);
  response.setHeader("Pragma", "no-cache");

  PrintWriter out = response.getWriter();
  out.println("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
  // 从httpRequest()方法中获得请求参数值
  // 通过httpRequest()方法封装的请求参数被编码为UTF-8格式，此处若想还原原来的编码格式，则需要通过UTF-8格式解码

  String userName = request.getParameter("userName");
  String result = null;
  boolean check = LoginDao.getInstance().checkUserName(userName.trim()); // 查找数据库是否存在该用户名
  if (check) {
   result = "<font color=&#39;red&#39;>该用户已经被使用</font>";
  } else {
   result = "<font color=&#39;green&#39;>该用户名可以使用</font>";
  }
  response.getWriter().print(result); // 将结果输出到response响应流中
 }

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  this.doPost(req, resp);
 }

}

Related recommendations:

Ajax implements asynchronous user name verification function

Ajax verification user name example code

Use AJAX to complete the asynchronous verification of the user name. Detailed explanation of the instance

The above is the detailed content of Detailed explanation of duplicate user names using jQuery and Ajax. For more information, please follow other related articles on the PHP Chinese website!

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：How to implement jquery web page loading progress barNext article：How to implement jquery web page loading progress bar

See more

Detailed explanation of duplicate user names using jQuery and Ajax

Related articles