您的位置：首页 > Web前端 > JavaScript

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

2017-04-05 21:58 387 查看

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="添加" onclick="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方法少了“｝”

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航