JAVA-WEB AJAX 實現檢測使用者名稱是否存在
阿新 • • 發佈:2018-12-30
簡單的實現用ajax檢測後臺使用者名稱是否存在
servlet
package com.demo.web; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class CheckNameServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); System.out.println(name); String flag = "0"; if("alex".equals(name)) { flag = "1"; } response.getWriter().write(flag); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> function checkName(obj) { var name = obj.value; $.ajax({ type : 'post', url : '${pageContext.request.contextPath}/checkNameServlet', data : { 'name' : name, }, dataType : 'text', success : function(data) { if(data == 1){ //存在 $('#ret-msg').html("使用者已存在"); }else{ //不存在 $('#ret-msg').html(""); } // window.console.log('成功回撥函式'); }, error : function() { window.console.log('失敗回撥函式'); } }) } </script> <title>ajax checkName</title> </head> <body> <input type="text" name='name' id='name' onblur="checkName(this);"><span id='ret-msg'></span> </body> </html>