Asp.net利用JQuery AJAX实现无刷新评论思路与代码

首先在数据库中就建三个字段的表用来存储用户名和评论信息，Id只是为了设置唯一标示，所以设置成整型自增字段就行了

再建一个超文本标记语言页面，只需简单的拉几个超文本标记语言控件出来摆着就行，注意在页面顶部有个桌子标签用来占位输出评论内容Html。页面代码就这样简单就行了： 复制代码代码如下：车身表id=' room '/表div用户名：输入id='Text1 '类型='text' /br /信息：textarea id=' textarea 1 ' cols=' 20 ' name=' S1 ' rows=' 5 '/textarebr/input id=' button 1 ' type=' button ' value='提交//div /body然后再页面刚加载的时候，需要从数据库中显示出已有的评论，所以建个后台一般处理程序，命名为：bodyload.ashx。这个后台处理程序就是读取数据库中的所有评论信息，加载到显示页面，当然我这里只是简单的利用|标记来区别每个用户的评论，用@标记来区分用户名和信息，所以不是很严谨。数据操作使用的是强类型的资料组获取所有评论信息后台处理代码如下：复制代码代码如下：使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用_20100921Web .DataSetMsgTableAdapters使用系统。文字；namespace _ 20100921 web {///summary///body load的摘要说明////摘要公共类体加载： IHttpHandler { public void process request(HttpContext context){ context } .响应。内容类型='文本/纯文本；T_MsgTableAdapter适配器=new T _ MsgTableAdapter()；StringBuilder sb=new StringBuilder()；数据集消息.T _ MsgDataTable表=适配器GetData()；foreach(表中的某人.追加（五。用户名);某人(某人的简写)追加("@");某人(某人的简写)追加(五.消息);某人(某人的简写)追加(' | ');}字符串结果=某人.ToString()；语境。回应。写（结果);} public bool IsReuse { get { return false；} } } } 前台调用JQuery代码在页面加载时进行读取评论，这里就用到了JQuery中的创建交互式、快速动态网页应用的网页开发技术了，其实也非常简单，就只是调用JQuery中的$.岗位()方法就可以实现了，该方法实质还是调用了$.ajax()的方法。前台JQuery代码如下：复制代码代码如下： $.post('bodyload.ashx '，函数(数据，状态){ if(状态==' success '){ var msgArr=data。拆分(' | ')；for(var I=0；I MsGarr . lentigi){ if(MsGarr[I]).长度==0){ return；} var msg=msgArr[i].拆分("@");var res='trtd '消息[0]'说：/tdtd ' msg[1]'/TD/tr '；$('#room ').追加(RES)；} } });然后来处理每一次用户输入后的插入数据及在页面无刷新更新显示评论内容，需要另外添加一个后台处理一般程序，命名为：update.ashx，用来在后台插入数据到数据库中。后台处理代码如下：复制代码代码如下：使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用_20100921Web .DataSetMsgTableAdaptersnamespace _ 20100921 web {///summary///update的摘要说明////摘要公共类更新： IHttpHandler { public void process request(HttpContext context){ context } .响应。内容类型='文本/纯文本；字符串用户名=上下文。请求['用户名'];字符串消息=上下文。请求['消息'];T_MsgTableAdapter适配器=new T _ MsgTableAdapter()；适配器。插入（用户名、消息);} public bool IsReuse { get { return false；} } } } 最后就是在前台将数据传到后台插入，并将评论信息进行更新：复制代码代码如下：美元(' #Button1 ').单击(function(){ var username=$(' # Text1 ').val()；var msg=$('#TextArea1 ').text()；$.post('update.ashx '，{ 'username': username，' msg': msg })，function (data，States){ if(States==' success '){ var RES=' trtd ' username '说：/tdtd ' msg '/TD/tr '；$('#room ').追加(RES)；} }) })