案例(JQuery的ajax无刷新评论)
CommentsTest.html代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "post", url: "CommentsTest.ashx", data: { action: 'loadMsgs' },
success: function (data) {
for (var i = 0; i < data.length; i++) {
var msg = data[i];
$("#ulMsgs").append($("<li>发表日期：" + msg.CreateDateTime + "；IP地址：" + msg.IP + "；消息：" + msg.Msg + "</li>"));
}
},
error: function () { alert("请求错误"); }
}); $("#btnPost").click(function () {
var msg = $("#txtMsg").val();
$.ajax({
type: "post", url: "CommentsTest.ashx", data: { msg: msg, action: 'post' },
success: function (data) {
if (data.Status == "ok") {
//alert("发表成功");
$("#ulMsgs").append($("<li>发表日期：刚刚；IP地址：本机；消息：" + msg + "</li>"));
$("#txtMsg").val("");
}
else if (data.Status == "error") {
alert(data.Msg);
}
},
error: function () { alert("请求错误"); }
});
});
});
</script>
</head>
<body>
<ul id="ulMsgs"> </ul> <br />
<textarea id="txtMsg" cols="50" rows="5"></textarea><br />
<input type="button" id="btnPost" value="发表" />
</body>
CommentsTest.ashx代码：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string action = context.Request["action"];
if (action == "loadMsgs")
{
DataTable dt = SQLHelper.ExecuteReader("select * from T_Comments");
List<Object> list = new List<object>();
foreach (DataRow row in dt.Rows)
{
string msg = (string)row["Msg"];
DateTime createDT = (DateTime)row["CreateDateTime"];
string ip = (string)row["IP"];
//JavaScriptSerializer在序列化DateTime的时候序列化出的东西不好看，可以在服务器端ToString()转换为字符串
//也可以在浏览器端，使用JS把/DATE\(203377733)/转换为字符串格式
list.Add(new { Msg = msg, CreateDateTime = createDT.ToString(), IP = ip });
}
context.Response.Write(new JavaScriptSerializer().Serialize(list));
}
else if (action == "post")
{
string msg = context.Request["msg"];
string ip = context.Request.UserHostAddress;
SQLHelper.ExecuteNonQuery("insert into T_Comments(Msg,CreateDateTime,IP) values(@Msg,@CreateDateTime,@IP)",
new SqlParameter("@Msg", msg), new SqlParameter("@CreateDateTime", DateTime.Now),
new SqlParameter("@IP", ip));
context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "ok", Msg = "发表成功" }));
}
else
{
throw new Exception("action错误");
}
}
案例(JQuery的ajax无刷新评论)的更多相关文章
- ajax无刷新评论示例
下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的“没有填写留言内容 ...
- Ajax：后台jquery实现ajax无刷新删除数据及demo
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAFSCAIAAAChUmFZAAAgAElEQVR4nO29z4scWZbn2/+Hb30zi8
- jquery 的ajax无刷新上传文件之后，页面还是会莫名的刷新-----解决办法
文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input ...
- jQuery.form Ajax无刷新上传错误 (jQuery.handleError is not a function) 解决方案
今天,随着ajaxfileupload时间firebug财报显示,"jQuery.handleError is not a function"错误.因为一旦使用jQuery.for ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- JS---案例：无刷新评论---属于创建对象的案例拿出来复习
案例:无刷新评论---属于创建对象的案例拿出来复习 创建行和单元格,添加到相应元素中,设置内容 createElement, appendChild,innerHTML <!DOCTYPE ht ...
- jQuery 无刷新评论
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery 实现页面无刷新
对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...
随机推荐
- Erlang第一课----基本变量
1.(in Erlang shell)A sequence of expressions must be terminated with a period followed by whitespace ...
- cf340 C. Watering Flowers
C. Watering Flowers time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- Spring+Struts2+Mybatis框架搭建时的常见典型问题
搭建SSM框架时,总是遇到这样那样的问题,有的一眼就能看出来,有的需要经验的积累.现将自己搭建SSM框架时遇到的典型问题总结如下: 一.Struts2框架下的action中无法使用@Autowired ...
- enum是不是"继承"int
enum Color : short { Nono=0, Black=1 } 我们知道基元类型(值类型), 是不可能被继承的,那这里的 :short 到底是什么意思? 我个人理解这里是用来限制取值 ...
- 在tp中使用mongo数据库并建立连接的实例
- Jquery,ajax返回json数据后呈现到html页面的$.post方式。
------------------------------------------------------完整版------------------------------------------- ...
- vector与set区别(基础知识)
首先,vector是序列式容器而set是关联式容器.set包含0个或多个不重复不排序的元素.也就是说set能够保证它里面所有的元素都是不重复的.另外对set容器进行插入时可以指定插入位置或者不指定插入 ...
- CSS 兼容 总结
1> margin加倍的问题 设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug. 解决方案是在这个div里面加上display:inline; 例如: &l ...
- 锋利的jQuery-4--给事件添加命名空间
可以把为元素绑定的多个事件用命名空间规范起来. $(function(){ $("p").bind("mouseover.plugin", function() ...
- heap和stack有什么区别
1.heap是堆,stack是栈. 2.stack的空间由操作系统自动分配和释放,heap的空间是手动申请和释放的,heap常用new关键字来分配. 3.stack空间有限,heap的空间是很大的自由 ...