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

本文链接：https://blog.csdn.net/luq885/article/details/2067438

这几天一直在研究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，改一下数据库的路径就可以了。

<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>