JAXER留言板-一个html页面的ajax留言版
这几天一直在研究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，改一下数据库的路径就可以了。
全部代码如下：
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行，当然还有很多细节没有处理，不过感觉还可以。
我最喜欢的是这个地方
1
function GetDataDB(pageindex){
2
var para = new Array();
3 para[0] = pageindex;
4 var rs = DBConn().execute("Select * from message order by oid desc limit (?-1)*10,10", para);
5 var clomnus = new Array();
6 clomnus[0] = "name";
7 clomnus[1] = "content";
8 clomnus[2] = "addTime";
9 return rs.extractColumns(clomnus);
10
}
function GetDataDB(pageindex){
2
var para = new Array();3
para[0] = pageindex;4
var rs = DBConn().execute("Select * from message order by oid desc limit (?-1)*10,10", para);5
var clomnus = new Array();6
clomnus[0] = "name";7
clomnus[1] = "content";8
clomnus[2] = "addTime";9
return rs.extractColumns(clomnus);10
}用sqlite可以直接用"limit 起始行 行数"直接做分页，比用"top"方便多了，还有就是最后的"extractColumns"方法，直接可以返回json格式的数据，看绑定部分就知道了。
下载地址：http://download.csdn.net/user/luq885，运行方法看这里http://www.cnblogs.com/luq885/archive/2008/01/25/1052288.html，改一下数据库的路径就可以了。
