这是我从学mvc以来做得最艰苦的功能.
一开始我为了解决无刷新提交数据,用了jquery的form插件.好不容易做好了.
当我写延迟加载评论的特效时,和无刷新提交发生了冲突: 当我点击表单里的文本框时候就触发了loading动画,也就是ajaxStart事件被触发了
我查了几天的资料,花了近一周的时间,才发现端倪.
我的validate插件是会触发ajaxStart事件的.
所以我放弃了
jQuery().ajaxStart(function() {
}).ajaxStop(function() {})
这样的写法.
自己去写ajax的post方法,把数据传递到一个页面(.aspx)或者一般程序文件(.ashx) 去处理.
没有再用MVC里的Action 去处理数据,因为我发现 Action对评论是否成功的状态也就是发表评论后的返回消息不能很好处理.
最后的解决方案如下:
Html页面:
<form id="commentForm" name="commentForm" method="POST" >
<textarea id="content" name="content" title="请输入评论"></textarea>
<button id="bt_comment" name="bt_comment" type="submit" >发表评论</button>
</form>
js代码:
<script language="javascript">
$().ready(function() {
//页面初始化时获取评论内容
getComments(0);
});
//获取评论内容
function getComments(pageindex) {
$.post("http://www.cnblogs.com/Services/GetComments.ashx", { Mid: <%= Model.Mid %>, PageIndex: pageindex, PageSize: 10},
function(data, textStatus) {
$("#videobodycommentlist").text("");
$("#videobodycommentlist").append(data.result);
}, "json");
}
</script>
<script language="javascript" type="text/javascript">
jQuery(function() {
var loader = jQuery('<div id="loader"><img src="http://images.cnblogs.com/loading.gif" alt="loading..." align="absmiddle"/> 评论正在发表,请等待</div>')
.appendTo("#commentLoading")
.hide(); //加载一个loading动画,先隐藏起来
$("#commentForm").validate({
errorElement: "reg",
success: function(label) {
label.text(" ").addClass("success");
},
rules:
{
content: { required: true, minlength: 11 }
},
submitHandler: function(form) { //在页面验证事件里注册一个提交事件,这个事件在表单数据验证通过才会触发
addComment(); //ajax提交数据
$("#commentForm").resetForm();//清空表单数据
}
});
});
function addComment() {
$("#bt_comment").attr("disabled", "disabled"); //把提交按钮禁用,防止用户反复提交
$("#loader").show(); //loading动画开始
$("#postcommentform").hide();
var datas = $("#commentForm").formToArray(); //用了jquery.form.js 插件里面的一个方法,把表单数据拼接起来
$.ajax({
type: "POST",
url: "http://www.cnblogs.com/Services/AddComment.ashx",
data: datas,
dataType: "json",
success: function(msg) {
alert(msg.result); //把返回消息弹出
$("#bt_comment").removeAttr("disabled");
$("#loader").hide();
$("#postcommentform").show();
getComments(0); //重新获取评论数据.
}
});
}
</script>
<!--v:3.2-->
分享到:
相关推荐
AJAX JQUERY自学文档,希望对大家有所帮助
Ajax完全自学手册Ajax完全自学手册Ajax完全自学手册Ajax完全自学手册Ajax完全自学手册Ajax完全自学手册
自学mvc的最好的资料,配有教学视频,学习资料,以及附带了一个mvc项目实例,可以一边做项目,一边学习mvc可以全面学习mvc,学习完这个网址的全部东西,相信你的mvc可以去公司用mvc开发项目了。
Ajax完全自学手册PPT和源代码分来上传了,需要PPT的请自己在我的资源里面查找。 1.本书1~22章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:Microsoft Visual ...
12.1 使用ASP.NET Ajax控件实现的页面无刷新的简单实例 第13章 AjaxGridView Ajax化的GridView AjaxChartRoom Ajax无刷新聊天室 第14章(\C05) AutoComplete AutoCompleteExtender控件的使用 ...
本资源包含了高等教育自学考试《C++程序设计》(课程代码:04737)2000年10月至2009年1月的各次正考、增考的全国试卷及其参考答案。 注: (1) 这门课程的前身是《面向对象程序设计》(课程代码:02328),直到...
全国2009年1月-2010年1月高等教育自学考试高等数学(工本)试题
2004年4月-2009年4月全国高等教育自学考试概率论与数理统计二.pdf
JQuery教程自学笔记 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画...
全国2009年1月高等教育自学考试C++程序设计试题课程代码:04737
PHP+Ajax完全自学手册
JQuery教程自学笔记总结 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 ...
自学两天ibatis后自己做的struts2+spring+ibatis+jquery ajax的登录注册
Ajax完全自学手册PPT和源代码分来上传了,需要PPT的请自己在我的资源里面查找。 1.本书1~22章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:Microsoft Visual ...