ajax异步提交案例（用户校验）
生活随笔
收集整理的這篇文章主要介紹了
ajax异步提交案例（用户校验）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、編寫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 清風(fēng)*/ @WebServlet("/registerServlet") public class RegisterServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {/*** 設(shè)置響應(yīng)到瀏覽器的類型為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");/*** 用一個(gè)map集合存放需要響應(yīng)到客服端的數(shù)據(jù)* useExsit:判斷數(shù)據(jù)庫(kù)中是否存在此用戶* *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", "此用戶名太受歡迎，請(qǐng)換一個(gè)");} else {map.put("userExsit", false);map.put("msg", "用戶名可用");}}/*** 把map集合解析為json字符串并響應(yīng)到瀏覽器*/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");//設(shè)置css樣式（紅色）span.html(data.msg);//設(shè)置服務(wù)器響應(yīng)回來(lái)的信息到span標(biāo)簽展示} else {span.css("color", "green");//設(shè)置css樣式（綠色）span.html(data.msg);//設(shè)置服務(wù)器響應(yīng)回來(lái)的信息到span標(biāo)簽展示}}, "json")})}) </script> <form>用戶名：<input type="text" id="name" name="name" placeholder="請(qǐng)輸入用戶名"><br><span id="u_name"></span><br>密碼：<input type="password" id="password" name="password" placeholder="請(qǐng)輸入密碼"><br><input type="submit" value="注冊(cè)"> </form> </body> </html>三、maven項(xiàng)目需要導(dǎo)入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>四、運(yùn)行效果
總結(jié)
以上是生活随笔為你收集整理的ajax异步提交案例（用户校验）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java的整数扩展，浮点数扩展，字符扩展
- 下一篇： VBA 网页提取特定内容 - 网抓实践总