JAXER留言板-一个html页面的ajax留言版
这几天一直在研究JAXER，结合jquery做了一个简单的留言板，只有一个html页面（除了jquery.js)，当然是完全的ajax操作。
全部代码如下：
一共就这159行，当然还有很多细节没有处理，不过感觉还可以。
我最喜欢的是这个地方
function
GetDataDB(pageindex)
{
var para = new Array();
para[0] = pageindex;
var rs = DBConn().execute("Select * from message order by oid desc limit (?-1)*10,10", para);
var clomnus = new Array();
clomnus[0] = "name";
clomnus[1] = "content";
clomnus[2] = "addTime";
return rs.extractColumns(clomnus);
}
用sqlite可以直接用"limit 起始行 行数"直接做分页，比用"top"方便多了，还有就是最后的" extractColumns"方法，直接可以返回json格式的数据，看绑定部分就知道了。
下载地址： http://download.csdn.net/user/luq885，运行方法看这里 http://www.cnblogs.com/luq885/archive/2008/01/25/1052288.html，改一下数据库的路径就可以了。
全部代码如下：
1
DOCTYPE HTML PUBLIC
"
-//W3C//DTD HTML 4.01//EN
"
"
http://www.w3.org/TR/html4/strict.dtd
"
>
2 < html >
3 < head >
4 < meta http - equiv = " Content-Type " content = " text/html; charset=utf8 "/ >
5 < title > Jaxer 留言板 < / title>
6 < script language = JavaScript type = text / javascript src=jquery.js>
7 < / script>
8 < script runat = server >
9
10 function GetDataDB(pageindex){
11 var para = new Array();
12 para[ 0 ] = pageindex;
13 var rs = DBConn().execute( " Select * from message order by oid desc limit (?-1)*10,10 " , para);
14 var clomnus = new Array();
15 clomnus[ 0 ] = " name " ;
16 clomnus[ 1 ] = " content " ;
17 clomnus[ 2 ] = " addTime " ;
18 return rs.extractColumns(clomnus);
19 }
20
21 function InsertMessageDB(name, content){
22 var para = new Array();
23 para[ 0 ] = unescape(name);
24 para[ 1 ] = unescape(content);
25 Jaxer.Log.info(para[ 1 ]);
26 DBConn().execute( " insert into message values(?,?,datetime('now','localtime')) " , para);
27 }
28
29 function DBConn(){
30 return new Jaxer.DB.SQLite.Connection({
31 PATH: " e://test//sqlite//message.db3 "
32 });
33 }
34 < / script>
35 < script runat = server - proxy >
36 function GetData(pageindex){
37 return GetDataDB(pageindex);
38 }
39
40 function InsertMessage(name, content){
41 InsertMessageDB(name, content.replace( / / g," ").replace( / /n / g,"
/
>
"
));
42 }
43
44
46 $(function(){
47
48 bindData(currentPage);
49
50 $( " #button1 " ).click(function(){
51 var name = $( " #txtName " ).val();
52 var content = $( " #txtContent " ).val();
53 if (name != "" && content != "" ) {
54 InsertMessage(escape(name), escape(content));
55 currentPage = 1;
56 bindData(currentPage);
57 $( " #txtName " ).val( "" );
58 $( " #txtContent " ).val( "" );
59 }
60 else
61 {
62 alert( " 请输入名字和内容。 " )
63 }
64 });
65
66 $( " #previous " ).click(function(){
67 currentPage = currentPage > 1 ? --currentPage : 1;
68 bindData(currentPage);
69 });
70
71 $( " #next " ).click(function(){
72 currentPage++;
73 bindData(currentPage);
74 });
75 })
76 function bindData(pageindex){
77 var msgdatas = GetData(pageindex);
78 $( " [@id = ready] " ).remove();
79 if (msgdatas.length > 0) {
80 $.each(msgdatas, function(i, n){
81 var row = $( " #msgData " ).find( " #template " ).clone();
82 row.find( " #name " ).text(n.name);
83 row.find( " #addTime " ).text(n.addTime);
84 row.find( " #content " ).html(n.content);
85 row.attr( " id " , " ready " );
86 row.appendTo($( " #msgData " ));
87 });
88 $( " [@id = ready] " ).show();
89 }
90 $( " #pageInfo " ).html( " 第 < b > " +currentPage+ " < / b>页");
91 }
92 < / script>
93 < / head>
94 < body >
95 < table border = 0 width = 500 id = msgData >
96 < tbody id = template style = display:none >
97 < tr >
98 < td colspan = 4 height = 5 >
99 < / td>
100 < / tr>
101 < tr >
102 < td >
103 姓名：
104 < / td>
105 < td id = name >
106 < / td>
107 < td >
108 留言时间：
109 < / td>
110 < td id = addTime >
111 < / td>
112 < / tr>
113 < tr >
114 < td height = 50 valign = top >
115 内容：
116 < / td>
117 < td colspan = 3 id = content valign = top >
118 < / td>
119 < / tr>
120 < tr >
121 < td colspan = 4 height = 2 bgcolor = black >
122 < / td>
123 < / tr>
124 < / tbody>
125 < / table>
126 < table border = 0 width = 500 >
127 < tr >
128 < td colspan = 2 id = pageInfo >< / td>
129 < td colspan = 2 align = right >
130 < a href = javascript: void ( 0 ); id = previous > 上一页 < / a>
131 < a href = javascript: void ( 0 ); id = next > 下一页 < / a>
132 < / td>
133 < / tr>
134 < / table>
135 < table >
136 < tr >
137 < td >
138 姓名：
139 < / td>
140 < td >
141 < input type = text id = txtName >
142 < / td>
143 < / tr>
144 < tr >
145 < td >
146 内容：
147 < / td>
148 < td >
149 < textarea id = txtContent cols = 20 rows = 5 >< / textarea>
150 < / td>
151 < / tr>
152 < tr >
153 < td >
154 < input type = button id = button1 value = 留言 >
155 < / td>
156 < / tr>
157 < / table>
158 < / body>
159 < / html>
2 < html >
3 < head >
4 < meta http - equiv = " Content-Type " content = " text/html; charset=utf8 "/ >
5 < title > Jaxer 留言板 < / title>
6 < script language = JavaScript type = text / javascript src=jquery.js>
7 < / script>
8 < script runat = server >
9
10 function GetDataDB(pageindex){
11 var para = new Array();
12 para[ 0 ] = pageindex;
13 var rs = DBConn().execute( " Select * from message order by oid desc limit (?-1)*10,10 " , para);
14 var clomnus = new Array();
15 clomnus[ 0 ] = " name " ;
16 clomnus[ 1 ] = " content " ;
17 clomnus[ 2 ] = " addTime " ;
18 return rs.extractColumns(clomnus);
19 }
20
21 function InsertMessageDB(name, content){
22 var para = new Array();
23 para[ 0 ] = unescape(name);
24 para[ 1 ] = unescape(content);
25 Jaxer.Log.info(para[ 1 ]);
26 DBConn().execute( " insert into message values(?,?,datetime('now','localtime')) " , para);
27 }
28
29 function DBConn(){
30 return new Jaxer.DB.SQLite.Connection({
31 PATH: " e://test//sqlite//message.db3 "
32 });
33 }
34 < / script>
35 < script runat = server - proxy >
36 function GetData(pageindex){
37 return GetDataDB(pageindex);
38 }
39
40 function InsertMessage(name, content){
41 InsertMessageDB(name, content.replace( / / g," ").replace( / /n / g,"
42 }
43
44
46 $(function(){
47
48 bindData(currentPage);
49
50 $( " #button1 " ).click(function(){
51 var name = $( " #txtName " ).val();
52 var content = $( " #txtContent " ).val();
53 if (name != "" && content != "" ) {
54 InsertMessage(escape(name), escape(content));
55 currentPage = 1;
56 bindData(currentPage);
57 $( " #txtName " ).val( "" );
58 $( " #txtContent " ).val( "" );
59 }
60 else
61 {
62 alert( " 请输入名字和内容。 " )
63 }
64 });
65
66 $( " #previous " ).click(function(){
67 currentPage = currentPage > 1 ? --currentPage : 1;
68 bindData(currentPage);
69 });
70
71 $( " #next " ).click(function(){
72 currentPage++;
73 bindData(currentPage);
74 });
75 })
76 function bindData(pageindex){
77 var msgdatas = GetData(pageindex);
78 $( " [@id = ready] " ).remove();
79 if (msgdatas.length > 0) {
80 $.each(msgdatas, function(i, n){
81 var row = $( " #msgData " ).find( " #template " ).clone();
82 row.find( " #name " ).text(n.name);
83 row.find( " #addTime " ).text(n.addTime);
84 row.find( " #content " ).html(n.content);
85 row.attr( " id " , " ready " );
86 row.appendTo($( " #msgData " ));
87 });
88 $( " [@id = ready] " ).show();
89 }
90 $( " #pageInfo " ).html( " 第 < b > " +currentPage+ " < / b>页");
91 }
92 < / script>
93 < / head>
94 < body >
95 < table border = 0 width = 500 id = msgData >
96 < tbody id = template style = display:none >
97 < tr >
98 < td colspan = 4 height = 5 >
99 < / td>
100 < / tr>
101 < tr >
102 < td >
103 姓名：
104 < / td>
105 < td id = name >
106 < / td>
107 < td >
108 留言时间：
109 < / td>
110 < td id = addTime >
111 < / td>
112 < / tr>
113 < tr >
114 < td height = 50 valign = top >
115 内容：
116 < / td>
117 < td colspan = 3 id = content valign = top >
118 < / td>
119 < / tr>
120 < tr >
121 < td colspan = 4 height = 2 bgcolor = black >
122 < / td>
123 < / tr>
124 < / tbody>
125 < / table>
126 < table border = 0 width = 500 >
127 < tr >
128 < td colspan = 2 id = pageInfo >< / td>
129 < td colspan = 2 align = right >
130 < a href = javascript: void ( 0 ); id = previous > 上一页 < / a>
131 < a href = javascript: void ( 0 ); id = next > 下一页 < / a>
132 < / td>
133 < / tr>
134 < / table>
135 < table >
136 < tr >
137 < td >
138 姓名：
139 < / td>
140 < td >
141 < input type = text id = txtName >
142 < / td>
143 < / tr>
144 < tr >
145 < td >
146 内容：
147 < / td>
148 < td >
149 < textarea id = txtContent cols = 20 rows = 5 >< / textarea>
150 < / td>
151 < / tr>
152 < tr >
153 < td >
154 < input type = button id = button1 value = 留言 >
155 < / td>
156 < / tr>
157 < / table>
158 < / body>
159 < / html>
一共就这159行，当然还有很多细节没有处理，不过感觉还可以。
我最喜欢的是这个地方
function
GetDataDB(pageindex)
{
var para = new Array(); para[0] = pageindex; var rs = DBConn().execute("Select * from message order by oid desc limit (?-1)*10,10", para); var clomnus = new Array(); clomnus[0] = "name"; clomnus[1] = "content"; clomnus[2] = "addTime"; return rs.extractColumns(clomnus); }
用sqlite可以直接用"limit 起始行 行数"直接做分页，比用"top"方便多了，还有就是最后的" extractColumns"方法，直接可以返回json格式的数据，看绑定部分就知道了。
下载地址： http://download.csdn.net/user/luq885，运行方法看这里 http://www.cnblogs.com/luq885/archive/2008/01/25/1052288.html，改一下数据库的路径就可以了。