JAXER留言板-一个html页面的ajax留言版
2008-01-26 22:10
337 查看
这几天一直在研究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行，当然还有很多细节没有处理，不过感觉还可以。
我最喜欢的是这个地方
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，运行方法看这里/article/5094165.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>
一共就这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，运行方法看这里/article/5094165.html，改一下数据库的路径就可以了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JAXER留言板-一个html页面的ajax留言版
- 一个简单的注册登录页面（包括阿里大于的手机验证）html+JS+AJAX+PHP
- ajax实例 html页面中用js调用一个php文件
- ajax技术，也是有局限的，不能跨域，即A工程的html页面发起一个ajax请求即http url请求调B工程的action（A和B不在一个域中的），怎么办？解决办法
- springmvc中以一个页面作为响应返回给ajax
- html 返回到上一个页面
- 参考lofter的代码写的一个小html页面
- 在一个项目中所有的Ajax功能用一个页面来实现
- Javascript 用本页面文本域中的HTML代码打开一个空白窗口来运行
- html中一个form下两个跳转页面
- ajax同步，页面显示与html代码不一致
- AJAX面试题：一个页面实现增删改查(ASP.NET实现)
- 学习用js, ajax, php做一个简单的小黄鸡页面（调用simsimi API）
- ajax父页面main.html
- 一个B.js获取另一个A.js的方法，只要将在html页面中的载入顺序将A.js放在B.js前即可
- springmvc中以一个页面作为响应返回给ajax
- HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
- 在页面中，我们经常看到，一个button按钮，如果属标点击，就会触发一个窗口的显示，如果二次点击并可以隐藏，那么如何通过JAVA配合html来实现这一功能呢？
- 在多个页面使用同一个HTML片段《续》
- Ajax (部分二：prototype.js代码)总结页面向后台传Form值、单个值和后台向前台传一个或是一组值