这几天一直在研究JAXER,结合jquery做了一个简单的留言板,只有一个html页面(除了jquery.js),当然是完全的ajax操作。
全部代码如下:
一共就这159行,当然还有很多细节没有处理,不过感觉还可以。
我最喜欢的是这个地方
用sqlite可以直接用"limit 起始行 行数"直接做分页,比用"top"方便多了,还有就是最后的" extractColumns"方法,直接可以返回json格式的数据,看绑定部分就知道了。
下载地址: http://download.csdn.net/user/luq885,运行方法看这里 http://www.cnblogs.com/luq885/archive/2008/01/25/1052288.html,改一下数据库的路径就可以了。
<script type="text/javascript">
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><script type="text/JavaScript"> var alimama_pid="mm_10058630_576867_919059"; var alimama_titlecolor="0000FF"; var alimama_descolor ="000000"; var alimama_bgcolor="FFFFFF"; var alimama_bordercolor="E6E6E6"; var alimama_linkcolor="008000"; var alimama_bottomcolor="FFFFFF"; var alimama_anglesize="0"; var alimama_bgpic="0"; var alimama_icon="0"; var alimama_sizecode="12"; var alimama_width=468; var alimama_height=60; var alimama_type=2; </script><script src="http://a.alimama.cn/inf.js" type=text/javascript> </script>
全部代码如下:
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,"<br / > " ));
42 }
43 </script>
44 <script language=javascript>
45 var currentPage = 1;
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,"<br / > " ));
42 }
43 </script>
44 <script language=javascript>
45 var currentPage = 1;
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);
}
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,改一下数据库的路径就可以了。