表单验证 ajax异步请求实例 json传参

ajax：不是编程语音，异步请求，局部刷新

jsp如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>注册用户</title>

<!-- <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
	$(function(){
		$("#reform").validate({
			 //同级最后项不加，
			 rules: {
				 user_name: "required",//表单name值，不是选择器 
			       password: {
			        required: true,//必须输入的字段
			        rangelength:[5,10] 
			      },
			      pwd: {
			    	   required: true, 
			    	   rangelength:[5,10] , 
			    	    equalTo: "#number" 
			      } 
			}  ,
			 messages:{
				 user_name: "用户名不能为空",			    
			      password: {
			    	  required: "密码不能为空",
			        	rangelength: "验证密码长度必须在5-10"
			      },
			      pwd: {
			    	   required: "验证密码不能为空",  
			    	   rangelength: "验证密码长度必须在5-10",
			    	   equalTo: "验证密码不相符"
			 		}	
			 }  
		});//表单验证
		
		
		$(".chcke").blur (function(){	
			var username = $("#name").val();
			var phone = $("#phone").val();
			
			 $.ajax({	
				url:"<%=request.getContextPath()%>/user/addUser.do",
				data:"name1="+username,
				//+"&phone="+phone,
				type:"post",
				dataType:"json",
				success:function(result){
					/* var a = result.mas;
					alert("msg aaaa"+a);  */
					var msg=result["mas"];
					
					if(msg=="no"){	
					
						$("#mss").empty();//清空用户已存在提示，提示只显示一次
						$("#mss").append("用户已存在");
					}
					
				},
				 error:function(xhr,status,error){
						alert("error "+error);
					 }
			}); 
		});  
	});
</script>
</head>

<body>

				
	<form id="reform" action="${pageContext.request.contextPath}/user/registerUser.do"
		method="post">								
		用户 名:<input type="text" name="user_name" id="name"  class="chcke"/><span id="mss" style='color:red;font-size:12px'></span><br>
		电话号码：<input type="text" name="tile" id="phone"  class="chcke"/><br>
		密  码:<input type="password" name="password" id="number" /><br>
		确认密码:<input type="password" name="pwd" id="num" /><br> 
		<input type="hidden" name="state" value="1" /><br> 
		<input type="submit" value="添加" οnclick="sub()"/>
	
		<span id="msg" style='color:red;font-size:12px'>${message}</span><br>
		<span style='color:bule;font-size:25px' >${mess}</span>
	</form>
</body>
</html>

contor层如下：

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.google.gson.Gson;

import cn.scxh.carmangger.model.Role;
import cn.scxh.carmangger.model.User;
import cn.scxh.carmangger.server.SafetyServer;
import cn.scxh.carmangger.server.UserServer;

@Controller
@RequestMapping("/user")
public class UserContorller {

	@Autowired
	private UserServer userServer;

	@Autowired
	private SafetyServer safetyServer;

	@RequestMapping("/addFormUser")
	public String addFormUser() {
		return "/user/add_user2";
	}

	@RequestMapping("/addUser")
	public void addUser(HttpServletResponse response, String name1)
			throws IOException {
		String mas = "";
		Map<String, Object> repMap = new HashMap<String, Object>();
		User user = userServer.getUserByName(name1);
		if (userServer.getUserByName(name1) != null) {
			mas = "no";
		}

		repMap.put("mas", mas);
		Gson gosn = new Gson();
		String Json = gosn.toJson(repMap);
		response.getWriter().write(Json);
		response.getWriter().flush();
		response.getWriter().close();


	@RequestMapping("/registerUser")
	public String registerUser(String user_name,String password,Integer state,Model model){
		User user = new User(user_name,password,state);
		if(userServer.registerUser(user)){	
			model.addAttribute("mess","注册成功,请等待一级管理员审核通过方可使用！谢谢！");
			return "/user/add_user2";
		}else{
			model.addAttribute("message", "用户已存在");
			return "/user/add_user2";
		}
		
	}

addUser方法少了“｝”

原文链接：https://blog.csdn.net/sxb956347789/article/details/69360901