天天无用

要用最简单的方法解决最实际的问题

用户操作

[留言] [发消息] [加为好友]

订阅我的博客

[编辑]luq885的公告

[编辑]文章分类

[编辑]链接

『天道酬勤』(RSS)

Dflying Chen (RSS)

听棠.NET (RSS)

存档

JAXER留言板-一个html页面的ajax留言版收藏

这几天一直在研究JAXER，结合jquery做了一个简单的留言板，只有一个html页面（除了jquery.js)，当然是完全的ajax操作。
全部代码如下：

  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>

一共就这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，改一下数据库的路径就可以了。

< type="text/javascript">< type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> < 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; < src="http://a.alimama.cn/inf.js" type=text/javascript>

发表于 @ 2008年01月26日　22:21:00 | 评论( loading... ) | 编辑| 举报| 收藏