ajax异步提交案例（用户校验）
生活随笔
收集整理的這篇文章主要介紹了
ajax异步提交案例（用户校验）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、編寫servlet類
package com.qingfeng.web; import com.fasterxml.jackson.databind.ObjectMapper; 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 java.io.IOException; import java.util.HashMap; import java.util.Map; /*** @author 清風*/ @WebServlet("/registerServlet") public class RegisterServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {/*** 設置響應到瀏覽器的類型為json* application/json;charset=utf-8*/resp.setContentType("application/json;charset=utf-8");resp.setCharacterEncoding("utf-8");String name = req.getParameter("name");String password = req.getParameter("password");/*** 用一個map集合存放需要響應到客服端的數據* useExsit:判斷數據庫中是否存在此用戶* *true:用戶名存在* *false:用戶名不存在*/Map<String, Object> map = new HashMap<>();if (name != null && !"".trim().equals(name)) {if ("admin".equals(name)) {map.put("userExsit", true);map.put("msg", "此用戶名太受歡迎，請換一個");} else {map.put("userExsit", false);map.put("msg", "用戶名可用");}}/*** 把map集合解析為json字符串并響應到瀏覽器*/ObjectMapper mapper = new ObjectMapper();mapper.writeValue(resp.getWriter(), map);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }二、編寫ajax和提交表單
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>Title</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script>$(function () {$("#name").blur(function () {var name = $("#name").val();//獲取用戶名var span = $("#u_name");var password = $("#password").val();//獲取密碼$.post("/registerServlet", {name: name, password: password}, function (data) {if (data.userExsit) {span.css("color", "red");//設置css樣式（紅色）span.html(data.msg);//設置服務器響應回來的信息到span標簽展示} else {span.css("color", "green");//設置css樣式（綠色）span.html(data.msg);//設置服務器響應回來的信息到span標簽展示}}, "json")})}) </script> <form>用戶名：<input type="text" id="name" name="name" placeholder="請輸入用戶名"><br><span id="u_name"></span><br>密碼：<input type="password" id="password" name="password" placeholder="請輸入密碼"><br><input type="submit" value="注冊"> </form> </body> </html>三、maven項目需要導入json解析器的依賴
<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.3.3</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.3.3</version></dependency>四、運行效果
總結
以上是生活随笔為你收集整理的ajax异步提交案例（用户校验）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java的整数扩展，浮点数扩展，字符扩展
- 下一篇： VBA 网页提取特定内容 - 网抓实践总