jQuery+Ajax vérifie le nom d'utilisateur-js tutoriel-php.cn

jQuery+Ajax vérifie le nom d'utilisateur

php中世界最好的语言

Libérer： 2018-05-08 15:57:45

original

1597 Les gens l'ont consulté

Cette fois, je vous apporte jQuery+Ajax pour vérifier le nom d'utilisateur. Quelles sont les précautions pour jQuery+Ajax pour vérifier le nom d'utilisateur. Ce qui suit est un cas pratique, jetons un coup d'œil.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery_ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
 //页面加载完成后
 $(function() {
  //添加失焦事件
  $("#username").blur(function() {
   //获取录入的用户名
   var usernamevalue = $("#username").val();
   //向服务器发送请求
   var url="/jquery_ajax/load";
   $("#username_span").load(url,{'username':usernamevalue});
  });
 });
</script>
</head>
<body>
 <input type="text" name="username" id="username"><span id="username_span"></span>
 <br>
 <input type="password" name="password">
 <br>
</body>
</html>

Copier après la connexion

ConnexionServlet

public class LoadServlet extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // 解决乱码
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  // 1.得到用户名
  String username = request.getParameter("username");
  // 2.判断用户名是否可以使用
  if ("tom".equals(username)) {
   // 用户名不可以使用
   response.getWriter().write("<font color=&#39;red&#39;>用户名被占用</font>");
  } else {
   // 用户名可以使用
   response.getWriter().write("<font color=&#39;green&#39;>用户名可以使用</font>");
  }
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doGet(request, response);
 }
}

Copier après la connexion

web.xml

<servlet>
 <description></description>
 <display-name>LoadServlet</display-name>
 <servlet-name>LoadServlet</servlet-name>
 <!-- 
  Class clazz = Class.forName("com.zxl.servlet.LoadServlet");
  Object obj = clazz.newInstatnce();
  // 反射去调用 doGet, doPost
  -->
 <servlet-class>com.zxl.servlet.LoadServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>LoadServlet</servlet-name>
 <url-pattern>/load</url-pattern>
 </servlet-mapping>

Copier après la connexion

Je crois que vous avez lu Dans ce cas, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de la zone de saisie du mot clé de vérification personnalisée iview

v-if et v dans vuejs -afficher les détails d'utilisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!