您的位置：首页 > Web前端 > JQuery

Asp.net利用JQuery AJAX实现无刷新评论

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



再建一个HTML页面，只需简单的拉几个html控件出来摆着就行，注意在页面顶部有个<table>标签用来占位输出评论内容。

Html页面代码就这样简单就行了:

viewsourceprint?

<
body
><
table
id
=
"room"
>
</
table
>
<
div
>
用户名：<
input
id
=
"Text1"
type
=
"text"
/><
br
/>
信息：<
textarea
id
=
"TextArea1"
cols
=
"20"
name
=
"S1"
rows
=
"5"
></
textarea
><
br
/>
<
input
id
=
"Button1"
type
=
"button"
value
=
"提交"
/></
div
>
</
body
>
然后再页面刚加载的时候，需要从数据库中显示出已有的评论，所以建个后台一般处理程序，命名为：bodyload.ashx。这个后台处理程序就是读取数据库中的所有评论信息，加载到显示页面，当然我这里只是简单的利用|标记来区别每个用户的评论，用@标记来区分用户名和信息，所以不是很严谨。数据操作使用的是强类型的DataSet

获取所有评论信息后台处理代码如下：

viewsourceprint?

01
using
System;
02
using
System.Collections.Generic;
03
using
System.Linq;
04
using
System.Web;
05
using
_20100921Web.DataSetMsgTableAdapters;
06
using
System.Text;
07
08
namespace
_20100921Web
09
{
10
///<summary>
11
///bodyload的摘要说明
12
///</summary>
13
public
class
bodyload:IHttpHandler
14
{
15
16
public
void
ProcessRequest(HttpContextcontext)
17
{
18
context.Response.ContentType=
"text/plain"
;
19
T_MsgTableAdapteradapter=
new
T_MsgTableAdapter();
20
21
StringBuildersb=
new
StringBuilder();
22
23
DataSetMsg.T_MsgDataTabletable=adapter.GetData();
24
25
foreach
(varv
in
table)
26
{
27
sb.Append(v.Username);
28
sb.Append(
"@"
);
29
sb.Append(v.Message);
30
sb.Append(
"|"
);
31
}
32
33
Stringresult=sb.ToString();
34
35
context.Response.Write(result);
36
37
}
38
39
public
bool
IsReusable
40
{
41
get
42
{
43
return
false
;
44
}
45
}
46
}
47
}
前台调用JQuery代码在页面加载时进行读取评论，这里就用到了JQuery中的AJAX了，其实也非常简单，就只是调用JQuery中的$.post()方法就可以实现了，该方法实质还是调用了$.ajax()的方法。

前台JQuery代码如下：

viewsourceprint?

$.post(
"bodyload.ashx"
,
function
(data,state){
if
(state==
"success"
){
var
msgArr=data.split(
"|"
);
for
(
var
i=0;i<msgArr.length;i++){
if
(msgArr[i].length==0){
return
;
}
var
msg=msgArr[i].split(
"@"
);
var
res=
"<tr><td>"
+msg[0]+
"说：</td><td>"
+msg[1]+
"</td></tr>"
;
$(
"#room"
).append(res);
}
}
});
然后来处理每一次用户输入后的插入数据及在页面无刷新更新显示评论内容，需要另外添加一个后台处理一般程序，命名为：update.ashx，用来在后台插入数据到数据库中。

后台处理代码如下：

viewsourceprint?

using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
_20100921Web.DataSetMsgTableAdapters;
namespace
_20100921Web
{
///<summary>
///update的摘要说明
///</summary>
public
class
update:IHttpHandler
{
public
void
ProcessRequest(HttpContextcontext)
{
context.Response.ContentType=
"text/plain"
;
Stringusername=context.Request[
"username"
];
Stringmsg=context.Request[
"msg"
];
T_MsgTableAdapteradapter=
new
T_MsgTableAdapter();
adapter.Insert(username,msg);
}
public
bool
IsReusable
{
get
{
return
false
;
}
}
}
}
最后就是在前台将数据传到后台插入，并将评论信息进行更新：

viewsourceprint?

$(
"#Button1"
).click(
function
(){
var
username=$(
"#Text1"
).val();
var
msg=$(
"#TextArea1"
).text();
$.post(
"update.ashx"
,{
"username"
:username,
"msg"
:msg},
function
(data,states){
if
(states==
"success"
){
var
res=
"<tr><td>"
+username+
"说：</td><td>"
+msg+
"</td></tr>"
;
$(
"#room"
).append(res);
}
})
})

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航