cari

Rumah >hujung hadapan web >tutorial js >基于jQuery实现Ajax验证用户名是否可用实例

基于jQuery实现Ajax验证用户名是否可用实例

亚连
亚连asal
2018-05-29 09:46:251545semak imbas

这篇文章主要为大家详细介绍了基于jQuery实现Ajax验证用户名是否可用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码，供大家参考，具体内容如下

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,{&#39;username&#39;: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>

LoginServlet

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);
 }

}

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>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue2中使用less简易教程

vue-cli脚手架-bulid下的配置文件

vue 开发一个按钮组件的示例代码

Atas ialah kandungan terperinci 基于jQuery实现Ajax验证用户名是否可用实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Vue中v-show添加表达式的问题(判断是否显示)Artikel seterusnya：jQuery实现的回车触发按钮事件功能示例

Artikel berkaitan

Lihat lagi