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,"&nbsp;").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            }

    用sqlite可以直接用"limit 起始行 行数"直接做分页,比用"top"方便多了,还有就是最后的"extractColumns"方法,直接可以返回json格式的数据,看绑定部分就知道了。
    下载地址:http://download.csdn.net/user/luq885运行方法看这里http://www.cnblogs.com/luq885/archive/2008/01/25/1052288.html,改一下数据库的路径就可以了。



posted @ 2008-01-26 22:10 天天无用 阅读(...) 评论(...) 编辑 收藏