ajax 局部刷新 失去焦点事件

效果图：

          

用户注册，输入客户名称后，

1.当客户名称失去焦点，即判断这个用户名是否在数据库中存在，存在则显示“用户名已存在”

2.不存在则不提示，可继续往下

3.没输入用户名会提示“请输入用户名”

jsp：

<form action="add" method="get" class="layui-form layui-form-pane">
		<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		<h2>添加客户</h2>
		<br />
		<div class="layui-form-item pane">
			<label class="layui-form-label">客户名称</label>
			<div class="layui-input-inline">
				<input type="text" name="name" id="name" autocomplete="off"
					class="layui-input ">
			</div>
			<span id="nameError" style="color: red;" class="error"></span>
		</div>
		<div class="layui-form-item pane">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-inline">
				<input type="text" name="password" id="password" autocomplete="off"
					class="layui-input ">
			</div>
			<span id="passwordError" style="color: red; display: none" class="error"></span>
		</div>
		<div class="layui-form-item pane">
			<label class="layui-form-label">地址</label>
			<div class="layui-input-inline">
				<input type="text" name="address" autocomplete="off"
					class="layui-input ">
			</div>
		</div>
		<div class="layui-form-item pane">
			<label class="layui-form-label">电子邮箱</label>
			<div class="layui-input-inline">
				<input type="text" name="email" autocomplete="off"
					class="layui-input ">
			</div>
		</div>
		<div class="layui-form-item pane">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-inline">
				<input type="text" name="telephone" autocomplete="off"
					class="layui-input ">
			</div>
		</div>
		<div class="layui-form-item ">
			<div class="layui-input-inline">
				<button class="layui-btn" lay-submit lay-filter="*">注册</button>
			</div>
		</div>
		<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		${error } ${addSuccess }
	</form>

第一种方法：

jquery：

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script>
		layui.use('form', function() {
			var form = layui.form;
			var returnMessage;
			
			//失去焦点
			$("#name").blur(function() {
				var name = $("#name").val();
				var data = {};
				data.name = name;
				if (name == null || name == "") {
					$("#nameError").html("请输入用户名 ！");
					$("#nameError").show();
					
				} else {
					$.ajax({
						url : "add",
					data : data,
						success : function(obj) {
							var result = JSON.parse(obj);
							returnMessage = result.resultMsg;
				 		if (result.resultCode == 300) {
								$("#nameError").html(result.resultMsg);
								$("#nameError").show();
							}
						}
					});
				}
			}).focus(function() {
				$("#nameError").hide(returnMessage);
			});		
		});
	</script>

 

写一个错误编码的实体类：

package cn.xxs.entity;

public class ResultBean {
	
	//300---有错误
	private int resultCode;
	//错误信息
	private String resultMsg;

	public int getResultCode() {
		return resultCode;
	}
	public void setResultCode(int resultCode) {
		this.resultCode = resultCode;
	}
	public String getResultMsg() {
		return resultMsg;
	}
	public void setResultMsg(String resultMsg) {
		this.resultMsg = resultMsg;
	}
	

}

servlet：

package cn.xxs.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

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


import cn.xxs.entity.Customer;
import cn.xxs.entity.ResultBean;
import cn.xxs.service.CustomerService;
import cn.xxs.service.impl.CustomerServiceImpl;
import net.sf.json.JSONObject;

public class CustomerAddServlet extends HttpServlet {
	private ResultBean resultBean = new ResultBean();
	
	public ResultBean getResultBean() {
		return resultBean;
	}

	public void setResultBean(ResultBean resultBean) {
		this.resultBean = resultBean;
	}
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 从请求中提取数据
		String name = req.getParameter("name");
		String password = req.getParameter("password");
		String address = req.getParameter("address");
		String email = req.getParameter("email");
		String telephone = req.getParameter("telephone");
		
		PrintWriter out = resp.getWriter();
		
		try {			
			// 处理数据（service）
			CustomerService service = new CustomerServiceImpl();
			Customer c = service.select(name);
			if (c != null) {
				resultBean.setResultCode(300);
				resultBean.setResultMsg("此用户名已存在");
				resp.getWriter().write(JSONObject.fromObject(resultBean).toString());
				out.flush();
				out.close();
			} 
			// 转时间格式
			//DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			 c = new Customer(null, name, password, new Date(), null, address, email, telephone);			
			if(name == null || name.isEmpty() && password == null || password.isEmpty()) {
				//添加失败，停留添加客户页面 ，并提示添加失败	
				req.setAttribute("error", "添加失败,请你重新添加");
				req.getRequestDispatcher("customerAdd.jsp").forward(req, resp);
				return;
			}
			service.add(c);			
			//添加成功，返回到用户管理页面			
			req.setAttribute("addSuccess", "添加成功");
			req.getRequestDispatcher("customerAdd.jsp").forward(req, resp);
		} catch (Exception e) {
					
		}

	}
}

第二种方法：

jquery：

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script>
		layui.use('form', function() {
			var form = layui.form;			
			$("#name").blur(function() {
				var name = $("#name").val();
				if (name == null || name == "") {
					$("#nameError").html("请输入用户名 ！");			
				} else {
					$.ajax({
						type:"get",
						url : "addCheck?name="+name,
						dataType : "json",
						success : function(data) {
							if (data != "") {
								$("#nameError").html("用户名已存在");						
							}
						}
					});
				}
			});
		});	
			
	
	</script>

servlet：

package cn.xxs.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.xxs.entity.Customer;
import cn.xxs.service.CustomerService;
import cn.xxs.service.impl.CustomerServiceImpl;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
 * Servlet implementation class CustomerAddAjaxServlet
 */
@WebServlet("/addCheck")
public class CustomerAddAjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CustomerAddAjaxServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
//		response.getWriter().append("Served at: ").append(request.getContextPath());
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//doGet(request, response);
		String name = request.getParameter("name");
		CustomerService service = new CustomerServiceImpl();
		Customer c = service.select(name);
		JSONArray json = JSONArray.fromObject(c);
		System.out.println(json);
		response.getWriter().write(json.toString());
	}

}

除了这些，customer实体类 dao层 service层 连接数据库等主要代码都可以在上一篇看

附上连接https://blog.csdn.net/qq_43560721/article/details/88342593