@RequestMapping("/toAddUser")
public String toAddUser() {
return "adduser";
}
@RequestMapping(value ="/addUser",method = RequestMethod.POST,produces = "application/json;charset=utf-8")
public @ResponseBody
String add(HttpServletRequest req) {
JsonResult jsonResult = new JsonResult();
try {
//p.setAttribute(user.getUsername(),user);
String users = req.getParameter("users");
Users user = JSON.parseObject(users,Users.class);
/* users.setName(new String(users.getName().getBytes("iso-8859-1"),"utf-8"));
users.setContent(new String(users.getContent().getBytes("iso-8859-1"),"utf-8"));*/
userService.insertUser(user);
jsonResult.setCode("000000");
jsonResult.setMsg("添加成功");
} catch (Exception e) {
e.printStackTrace();
jsonResult.setCode("000001");
jsonResult.setMsg("添加不成功");
}
return JSON.toJSONString(jsonResult);
}先来展示一下我最初的前后端代码
前端
<%@ page contentType="text/html; charset=GBK" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>人力资源管理系统</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css ">
<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Js/typem.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
document.getElementById("username").οnblur=function(){
var name = $("#username").val();
var filter = /^[0-9A-Za-z.@-_]{6,16}$/;
if (filter.test(name))
{
document.getElementById("msg").innerHTML='格式正确';
}
else{
document.getElementById("msg").innerHTML='应为数字 字符 . @ - _ 字符组成 6到16个字符';
return ;
}
// console.info(name);
$.ajax({
type : 'POST',
url : '${pageContext.request.contextPath}/welcome/verifyName?name='+name,
contentType: "application/json; charset=utf-8",
//data : {"name":name},
dataType : 'json',
success : function(data) {
if(data.code =="000001") {
document.getElementById("msg").innerHTML=data.msg;
}else if(data.code =="000002"){
document.getElementById("msg").innerHTML=data.msg;
}
}
});
}
}
</script>
<script type="text/javascript">
function formsubmit(){
var name = $("#username").val();
var rel_name = $("#name").val();
var password = $("#password").val();
var birthday = $("#birthday").val();//获取值
var sex=$('input:radio:checked');
//var isadmin=$('input:checkbox:checked').val();
// if($('input:checkbox:checked').val() == 'on'){
// $("#isadmin").val("1");//传入值1
// }else{
//
// $("#isadmin").val("");//值亲空
// $("#isadmin").val("0");
// }
var content=$("#content").val();
if (name == null || "" ==name) {
alert("用户名不能为空");
return false;
}
if (rel_name == null || "" ==rel_name) {
alert("姓名不能为空");
return;
}
if($("#msg").text() == "用户名不可用" ){
return;
}
if (password == null || "" ==password) {
alert("密码不能为空");
return;
}
if (birthday == null || "" ==birthday) {
alert("出生日期不能为空");
return;
}
var data1 =$('#userForm').serialize();
// data1 = Regex.Replace(data1, @"\\/Date\((\d+)\)\\/", match =>
// {
// DateTime dt = new DateTime(1970, 1, 1);
// dt = dt.AddMilliseconds(long.Parse(match.Groups[1].Value));
// dt = dt.ToLocalTime();
// return dt.ToString("yyyy-MM-dd HH:mm:ss");
// });
console.info(JSON.stringify($('#userForm').serialize()));
$.ajax({
type : 'POST',
url : '${pageContext.request.contextPath}/welcome/addUser?'+data1+"&birthday="+birthday,
contentType: "application/json; charset=utf-8",
data :data1,
dataType : 'json',
error : function(data) {
alert("请求失败，网络异常")
console.log(data);
},
success : function(data) {
if(data.code =="000000") {
alert(data.msg);
$.ajax({
type : 'POST',
url : '${pageContext.request.contextPath}/welcome/toManage?'+data1,
contentType: "application/json; charset=utf-8",
data : null,
dataType : 'json',
});
}else{
alert(data.msg);
}
}
});
}
</script>
<style type="text/css">
<!--
.atten {font-size:12px;font-weight:normal;color:#F00;}
-->
</style>
</head>
<body class="ContentBody">
<form id="userForm" >
<div class="MainDiv">
<table width="99%" border="0" cellpadding="0" cellspacing="0" class="CContent">
<tr>
<th class="tablestyle_title" >人员信息录入</th>
</tr>
<tr>
<td class="CPanel">
<table width="90%" border="0" cellpadding="0" cellspacing="0" style="width:80%" align="center">
<tr>
<td align="left">
<%--<input type="submit"value="保存" class="button"/> --%>
</td>
</tr>
<TR>
<TD width="100%">
<fieldset style="height:100%;">
<legend>人员信息</legend>
<table width="100%" border="0" cellpadding="2" cellspacing="1" style="width:100%">
<tr>
<td nowrap align="right" width="9%">用户名：</td>
<td width="36%">
<input name="username" type="text" class="input" id="username"/>
<span class="red">*</span> <span id="msg"></span></td>
<td nowrap align="right" width="9%">真实姓名：</td>
<td width="36%">
<input name="name" type="text" class="input" id="name"/>
<span class="red">*</span> </td>
</tr>
<tr>
<td width="12%"><div align="right">登陆密码：</div></td>
<td width="43%">
<input name="password" type="password" class="input" id="password" />
<span class="red">*</span></td>
<td><div align="right"><label for="birthday">出生日期：</label></div></td>
<td>
<input name="birthday" type="date" class="input" id="birthday"/>
<span class="red">*</span></td>
<%--<input name="birthday" id="birthday" type="text" />--%>
</td>
</tr>
<tr>
<td nowrap align="right" width="9%">性别：</td>
<td>
<input name="sex" type="radio" value="1" checked> 男
<input name="sex" type="radio" value="0">女</td>
</tr>>
<tr>
<%--<td nowrap align="right">是否管理员：</td>--%>
<%--<td>--%>
<%--<input type="checkbox">--%>
<%--<input type="hidden" name="isadmin" id="isadmin"></td>--%>
<td> </td>
<td> </td>
</tr>
<tr>
<td nowrap align="right">人员简介：</td>
<td colspan="3">
<textarea name="content" cols="100" rows="6" class="input" id="content"></textarea></td>
</tr>
</table>
<br />
</fieldset>
</TD>
</TR>
</TABLE>
</td>
</tr>
<TR>
<TD colspan="2" align="center" height="50px">
<%--<button οnclick="submit()">保存</button>--%>
<input name="提交" type="button" class="button" value="保存" οnclick="formsubmit()">
<input name="重置" type="reset" class="button" value="重置"/></TD>
</TR>
</TABLE>
</div>
</form>
</body>
</html>
后端
@RequestMapping("/verifyName")
public @ResponseBody
String verifyName(String name) {
JsonResult jsonResult = new JsonResult();
try {
Users user = userService.setList1(name);
if (user == null) {
jsonResult.setCode("000001");
jsonResult.setMsg("用户名可用");
} else {
jsonResult.setCode("000002");
jsonResult.setMsg("用户名不可用");
}
} catch (Exception e) {
e.printStackTrace();
jsonResult.setCode("000003");
jsonResult.setMsg("查询失败");
}
return JSON.toJSONString(jsonResult);
}
/**
*
* @return
*/
@RequestMapping("/toAddUser")
public String toAddUser() {
return "adduser";
}
@RequestMapping("/addUser")
public @ResponseBody
String add(Users user) {
JsonResult jsonResult = new JsonResult();
try {
// p.setAttribute(user.getUsername(),user);
user.setUsername(new String(user.getUsername().getBytes("iso-8859-1"),"utf-8"));
user.setContent(new String(user.getContent().getBytes("iso-8859-1"),"utf-8"));
userService.insertUser(user);
jsonResult.setCode("000000");
jsonResult.setMsg("添加成功");
} catch (Exception e) {
e.printStackTrace();
jsonResult.setCode("000001");
jsonResult.setMsg("添加不成功");
}
return JSON.toJSONString(jsonResult);
}出问题了，把普通的testarea转变为百度的文本编辑框后，我拿一长篇文章进行测试，少量的内容可以传过去，但大量就传不过去。开始排除出错原因了
1.数据库字段设置的字段类型过小，百度搜索得到在mysql中，一个TEXT列，最大长度为65535(2^16-1)个字符，也就是64K的数据。将传递过去的HTML代码复制着WORD上面发现不过1000多字，所以用TEXT是够的。
2.怀疑是编辑器问题，直接不想改，我一搞后端这不是太浪费时间了，询问周边同事，为什么这个文本编辑器里面的值传不过去，大佬一看我的拼接字符串就觉得，不行，改用传JSON数据过去，data :{"users":JSON.stringify(data1)},出问题了JSON转化总是抛出异常，学长说GET发送遇到有些标点符号就会截取部分字段，然后在后端写
@RequestMapping(value ="/addUser",method = RequestMethod.POST,produces = "application/json;charset=utf-8")把前端的AJAX的用不到的删除，还是不管用。
只能一个一个的传值过去，看看对不对。我在前端新建一个对象var params={}，params.实体字段名=表单里面的value值。在后台调试看看传过来的json值是什么。发现性别传了两个值，
原来多选框获取值 是这样写的var sex=$('input:radio:checked').val();还有个问题文本框的值不能正常获取到，于是在初始化的js代码里面添加全局变量var ue;ue = UE.getEditor('content');在提交表单的按钮触发事件里面写params.content=ue.getContent();就可以获取到文本编辑框里面的值了，下面分享修改后的前后端<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>人力资源管理系统</title> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css "> <script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/Js/typem.js"></script> <script type="text/javascript"> var ue ; window.οnlοad=function(){ document.getElementById("username").οnblur=function(){ var name = $("#username").val(); var filter = /^[0-9A-Za-z.@-_]{6,16}$/; var a="1"; $.ajax({ type : 'POST', url : '${pageContext.request.contextPath}/users/verifyName?name='+name, contentType: "application/json; charset=utf-8", //data : {"name":name}, dataType : 'json', success : function(data) { if(data.code =="000001"){ console.info(data.msg) a=data.msg; if (filter.test(name)) { document.getElementById("msg").innerHTML=a+'，格式正确'; } else{ document.getElementById("msg").innerHTML='应为数字 字符 . @ - _ 字符组成 6到16个字符'; return ; } // document.getElementById("msg").innerHTML=data.msg; }else if(data.code =="000002"){ a=data.msg; //document.getElementById("msg").innerHTML=data.msg; } } }); } ue = UE.getEditor('content'); } function formsubmit(){ var params = {}; var name = $("#username").val(); var rel_name = $("#name").val(); var password = $("#password").val(); var birthday = $("#birthday").val();//获取值 var sex=$('input:radio:checked').val(); //var isadmin=$('input:checkbox:checked').val(); // if($('input:checkbox:checked').val() == 'on'){ // $("#isadmin").val("1");//传入值1 // }else{ // // $("#isadmin").val("");//值亲空 // $("#isadmin").val("0"); // } var content=$("#content").val(); if (name == null || "" ==name) { alert("用户名不能为空"); return; } if (rel_name == null || "" ==rel_name) { alert("姓名不能为空"); return; } if($("#msg").text() == "用户名不可用" ){ return; } if (password == null || "" ==password) { alert("密码不能为空"); return; } if (birthday == null || "" ==birthday) { alert("出生日期不能为空"); return; } // var data1 =$('#userForm').serialize(); // console.info(JSON.stringify($('#userForm').serialize()));*/ params.name=rel_name; params.username=name; params.password = password; params.birthday=birthday; params.sex=sex; params.content=ue.getContent(); $.ajax({ type : 'POST', url : 'http://localhost:8080/hrm/users/addUser', /// contentType: "application/json; charset=utf-8", data :{"users":JSON.stringify(params)}, dataType : 'json', error : function(data) { alert("请求失败，网络异常") console.log(data); }, success : function(data) { if(data.code =="000000") { alert(data.msg); }else{ alert(data.msg); } } }); } </script> <style type="text/css"> <!-- .atten {font-size:12px;font-weight:normal;color:#F00;} --> </style> </head> <body class="ContentBody"> <form id="userForm" > <div class="MainDiv"> <table width="99%" border="0" cellpadding="0" cellspacing="0" class="CContent"> <tr> <th class="tablestyle_title" >人员信息录入</th> </tr> <tr> <td class="CPanel"> <table width="90%" border="0" cellpadding="0" cellspacing="0" style="width:80%" align="center"> <tr> <td align="left"> <%--<input type="submit"value="保存" class="button"/> --%> </td> </tr> <TR> <TD width="100%"> <fieldset style="height:100%;"> <legend>人员信息</legend> <table width="100%" border="0" cellpadding="2" cellspacing="1" style="width:100%"> <tr> <td nowrap align="right" width="9%">用户名：</td> <td width="36%"> <input name="username" type="text" class="input" id="username"/> <span class="red">*</span> <span id="msg"></span></td> <td nowrap align="right" width="9%">真实姓名：</td> <td width="36%"> <input name="name" type="text" class="input" id="name"/> <span class="red">*</span> </td> </tr> <tr> <td width="12%"><div align="right">登陆密码：</div></td> <td width="43%"> <input name="password" type="password" class="input" id="password" /> <span class="red">*</span></td> <td><div align="right"><label for="birthday">出生日期：</label></div></td> <td> <input name="birthday" type="date" class="input" id="birthday"/> <span class="red">*</span></td> <%--<input name="birthday" id="birthday" type="text" />--%> </td> </tr> <tr> <td nowrap align="right" width="9%">性别：</td> <td> <input name="sex" type="radio" value="1" checked> 男 <input name="sex" type="radio" value="0">女</td> </tr> <tr> <%--<td nowrap align="right">是否管理员：</td>--%> <%--<td>--%> <%--<input type="checkbox">--%> <%--<input type="hidden" name="isadmin" id="isadmin"></td>--%> <td> </td> <td> </td> </tr> <tr> <td nowrap align="right">人员简介：</td> <td colspan="20"> <div data-option="region:'center',title:'内容'"> <textarea name="content" cols="100" rows="6" class="input" id="content"></textarea> <%--<script type="text/javascript" charset="utf-8">--%> <%--UE.getEditor('content');--%> <%--</script>--%> </div> </td> </tr> </table> <br /> </fieldset> </TD> </TR> </TABLE> </td> </tr> <TR> <TD colspan="2" align="center" height="50px"> <%--<button οnclick="submit()">保存</button>--%> <input name="提交" type="button" class="button" value="保存" οnclick="formsubmit()"> <input name="重置" type="reset" class="button" value="重置"/></TD> </TR> </TABLE> </div> </form> </body> </html>
后端
@RequestMapping("/toAddUser")
public String toAddUser() {
return "adduser";
}
@RequestMapping(value ="/addUser",method = RequestMethod.POST,produces = "application/json;charset=utf-8")
public @ResponseBody
String add(HttpServletRequest req) {
JsonResult jsonResult = new JsonResult();
try {
//p.setAttribute(user.getUsername(),user);
String users = req.getParameter("users");
Users user = JSON.parseObject(users,Users.class);
/* users.setName(new String(users.getName().getBytes("iso-8859-1"),"utf-8"));
users.setContent(new String(users.getContent().getBytes("iso-8859-1"),"utf-8"));*/
userService.insertUser(user);
jsonResult.setCode("000000");
jsonResult.setMsg("添加成功");
} catch (Exception e) {
e.printStackTrace();
jsonResult.setCode("000001");
jsonResult.setMsg("添加不成功");
}
return JSON.toJSONString(jsonResult);
}
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
