Jquery:使用$.ajax()和serialize()函数来实现表单提交

当时写修改这个功能，输入！@#￥%………………&&这种特殊符号，点提交，通过Ajax传参数，action就接受的值为null ,想了半天，也不知道怎么办，就用正则表达式限定了一下，输入！@#类型这种特殊符号时，就给出提示要重新输入！，后来给我们老大检查，他说你这是避免问题的发生，并没有从根本上解决问题。我想了想也是，后来就是用的是serialize()这个函数来传的参数，哈哈，action就有值了。

之前代码如下：

<div class="video-text">
<p class="video-time1">18.16</p>
<p><textarea class="video-wenben" id="videoContent_43"></textarea></p>
<div class="but-blue"><a href="#none" οnclick="subVideoNode()">提交</a></div>
</div>

<script>

function subVideoNode(){
var flag = isLogin("${site.alias}");//判断是否登录
if(flag){
var content = $("#videoContent_43").val();
if("" == content){
alert("笔记不能为空，请重新输入！");
return false;
}
var date = new Date(); 
$.ajax({//检查是否收藏
type:"POST",
cache:false,
dataType:"json",
data:"chapterId=${chapter.chapterId }&content="+content,  
url: "<%=path%>/nanning/video/m_subVideoNote.jspx",
success:function(result){
$("#videoContent_43").val("");
if(result.flag){
var _div = $("#videoNote_43");
var _html = "";
_html += "<ul class=\"mt10\">"+
"<li class=\"video-font12\"><span class=\"fr gray\"></span> <span class=\"video-time\">"+date.format("yyyy-MM-dd hh:mm")+"</span></li>"+
"<li>"+content+"</li>"+
"</ul>";
_div.append(_html);
}else{
}
},
error:function(result){
//$("#shake-demo").shake();
}
});
}else{
if(winLogin("#none","${site.alias}")){
subVideoNode();
}
}
}
</script>

Java代码：

 public String subVideoNote(){
String msg = "";
boolean flag = false;
try {
Member member = (Member)getSessionAttribute("member_nanning");
String chapterId = getRequest().getParameter("chapterId");
String content = getRequest().getParameter("content");
VideoNote note = new VideoNote();
note.setChapter(new Chapter(Long.valueOf(chapterId)));
note.setContent(content);
note.setMember(member);
note.setNoteTime(new Date());
courseService.addVideoNote(note);
flag = true;
} catch (Exception e) {
msg = "请先登录";
}
JSONObject obj = new JSONObject();
obj.put("flag", flag);
obj.put("msg", msg);
setJson(obj.toString());
return "json";
}

更改后的代码 ：

 就是 要通过form表单来提交，通过serialize()这个函数来实现序列化。

<div class="video-text">
<p class="video-time1">18.16</p>
   <form id="videoNoteForm"> 
<input type="hidden" name="chapterId" value="${chapter.chapterId }"/>
<p><textarea class="video-wenben" id="videoContent_43" name="content"></textarea></p>
        </form>
<div class="but-blue"><a href="#none" οnclick="subVideoNode()">提交</a></div>
</div>

<script>

//提交笔记
function subVideoNode(){
var flag = isLogin("${site.alias}");//判断是否登录
if(flag){
var content = $("#videoContent_43").val();
// var reg =/[@#$%^&*]+/;
// if(reg.test(content)){
//  alert("请正确输入笔记内容！");
//  return false;
// }
if("" == content){
alert("笔记不能为空，请重新输入！");
return false;
}
if(content.length>1000){
alert("笔记内容过长，请重新输入！");
return false;
}
var date = new Date(); 
$.ajax({//检查是否收藏
type:"POST",
cache:false,
dataType:"json",
data:$("#videoNoteForm").serialize(),
url: "<%=path%>/nanning/video/m_subVideoNote.jspx",
success:function(result){
$("#videoContent_43").val("");
if(result.flag){
var _div = $("#videoNote_43");
var _html = "";
_html += "<ul class=\"mt10\">"+
"<li class=\"video-font12\"><span class=\"fr gray\"></span> <span class=\"video-time\">"+date.format("yyyy-MM-dd hh:mm")+"</span></li>"+
"<li>"+content+"</li>"+
"</ul>";
_div.append(_html);
}else{
}
},
error:function(result){
//$("#shake-demo").shake();
}
});
}else{
if(winLogin("#none","${site.alias}")){
subVideoNode();
}
}
}
</script>

Java代码：

 public String subVideoNote(){
String msg = "";
boolean flag = false;
try {
Member member = (Member)getSessionAttribute("member_nanning");
if(member!=null){
String chapterId = getRequest().getParameter("chapterId");
String content = getRequest().getParameter("content");
VideoNote note = new VideoNote();
note.setChapter(new Chapter(Long.valueOf(chapterId)));
note.setContent(content);
note.setMember(member);
note.setNoteTime(new Date());
courseService.addVideoNote(note);
flag = true;
}else{
msg = "请先登录";
}
} catch (Exception e) {
e.printStackTrace();
msg = "系统异常";
}
JSONObject obj = new JSONObject();
obj.put("flag", flag);
obj.put("msg", msg);
setJson(obj.toString());
return "json";
}