留言板的处理流程及其实现过程
项目背景
@本网站的《莘莘之音》节目中每一期节目下面的留言功能就是按照本文的思路实现的@
在日常的网站制作的项目中，往往会带上留言板的功能。主要的目的是让网站用户能够在本站进行留言，以此方式来进行社区化的交流。另一方面还可以让版主或者站长看到用户的意见建议和反馈，提升服务质量。
网站前端界面
这种界面在很多网站中都能够看到，最典型的就是微博类的社交网站。
通过Firefox 的firebug 插件分析后看到，新浪微博的这个输入框其实是HTML 中的标签。
这是我在页面里写的一段代码，看到在表单包围下，有一个标签和标签。其中里输入的是title ，即该留言的标题；标签输入的是留言的正文内容。
可以直接通过的属性来定义该标签的呈现方式，但还是建议通过CSS 来定义。这样可定义的内容更丰富，程序编写更灵活。
这里就是该标签的CSS 样式。
Width 和height ：直接定义了这个输入框的宽和高
Letter-spacing ：定义输入框中文字之间的间隔，为了美观最好还是不要让文字挤在一起。
Ling-heigh ：定义输入框中的行高，类似Word 中的段落间距的设置，也是为了美观。
Font-size ：定义文字的大小
Padding ：定义文字块距离输入框边界的距离，不要让文字离输入框边界太近，也是为了美观
下面重点来讲一下上图中剩下的三个CSS 属性。
resize
我们在HTML 文件中写入标签，然后在浏览器中打开，会看到在输入框右下角有两个45度的短线，意思是可以通过鼠标拖动这个短线来调整输入框的大小。
这种特性很灵活，但是往往在已经计算好尺寸的网页里不适用。因为用户任意改变输入框的尺寸，会影响页面中的其他元素的尺寸，从而影响整个页面的整体美观。所以我们通过CSS 让用户无法修改这个标签的尺寸。
在CSS 中写入resize:none
即重新改变尺寸为“否”。
这样处理后，在输入框右下角就不会出现这两个短线了。
overflow-x / overflow-y
文字如果在x 轴方向溢出，将如何处理？
我们在标签中输入的内容如果过长，则会进行相应的处理。我的这个实例中设置了overflow-x 的值为hidden 。表示如果文字溢出，在X 轴方向上隐藏不显示。而overflow-y 的值为auto ，表示如果文字太多，则会在输入框中自动加入滚动条。
类似于这样的效果。
后端业务逻辑
我们在上面的代码截图能够看到，我把标签写在了表单中了，这是因为在进行数据提交的时候，只有通过表单的方式，才能取到中的内容。
在表单外面写了两个
，作为操作的按钮。一个是提交内容，一个是重写。
这里捎带的讲解一下CSS3
的新属性，可以方便的修饰div 标签的外轮廓形状，让矩形的div 的轮廓变成圆角矩形。看到在这两个标签的CSS 属性中，有一条是border-radius ：50px ；表示的是轮廓的半径，这样做的结果就是div 变成了圆角矩形，这个值越大，矩形边缘的弧度就更大。
下面讲解通过jQuery 的ajax 方法，取得标签中的内容，然后提交给服务器端的一个PHP 文件进行业务逻辑的处理。 下图是发布按钮的单击事件的代码截图：
从代码第27行开始，通过$(".post")取得提交按钮的控制权，当这个标签发生了点击事件，则会触发下面的动作。$(".post").click(function(e)
▉ 28行——如果当用户名的这一栏为空值，则提示先登录，才能发布消息。对应这段代码
" name="username"> 这段代码是通过PHP 的超全局变量$_COOKIE来进行的。当用户登录成功后，PHP 程序会控制浏览器将用户的cookie 信息（username 和password ）写入到浏览器的cookie 文件中，当用户下次登录的时候，通过PHP 程序检测浏览器的cookie 内容，如果有对应的内容，则将网页的状态设置为该用户已登录，如果没有cookie 信息，则这个input 标签的value 的值为空，表示用户未登录。
▉ 30行——如果标题栏中的内容和正文输入框的为空或者输入的是连续的空格，则提示标题或正文不能为空。这里使用了jQuery 的正则表达式来验证字符串的内容。/^\s*$/ 表示以空格（space ）开始（^），并有一个或多个空格（*），而且以空格结束（$）。【关于jQuery 或javascript 的正则表达式的讲解，请参考本网站编程栏目的相关文章】
▉ 32行——如果num
▉ 34行——如果上面的条件都满足，表示用户的情况满足发布的要求，则在点击发布按钮的时候，进行ajax 异步操作。这里没有直接使用jQuery 的ajax （）方法，而是使用了它的简化版$.get（）方法。因为在表单标签中，我们定义了表单信息是以get 的方式提交的，，这种方式的特点是当用户提交时，会在浏览器地址栏中显示提交的信息，比如
http://www.ailin.net.cn/post.php?username=frank&password=123456&content=XXXXXXXX，这种方式比较快，但是不安全，因为全都走光了！！！
微博中默认只能输入140个字符，在输入字符的同时，系统会实时的检测用户输入的字数，如果超出了140这个显示，则提示，并无法发布。这种设计其实是新浪微博抄袭美国的twitter 的设计。这样做的用意是让用户用很少的字来说明事情，写完自己想说的事，这样让浏览者也能快速的舒服的看完你所发布的信息。因为现在的互联网阅读是碎片化的阅
读，在快速的生活节奏下，已经很少有能像读小说那样去欣赏，去体会大段文字的魅力了。另外的用意是，这样也逼迫着用户多发消息，多发帖子，有什么大事小情都发消息，从而让这个网站的内容更丰富，流量更大。
言归正传，那么如何能够实时的检测中的字数呢？jQuery 能够办到。首先在页面里用一个标签来显示还能输入的字数。
然后在js 文档中用jQuery 提供的键盘事件函数来计算字数的情况
▉ 第4行，首先定义一个全局变量maxWord ，表示能够输入的文字上限，赋值为140。
▉ 第5行，定义一个全局变量num ，用来存放还能输入的字符数。
▉ 第6行，给class 为num 的标签中放入maxWord 的值，表示当页面刚加载好的时候，在输入框下面就显示“您可以输入140个字符”
▉ 第7行，$(".content").keydown(function(e)，输入框的键盘按下事件出发keydown 方法，执行相应的操作。 ▉ 第8行，让maxWord 的值减去当前输入框的字符的长度，就得到了还能够输入多少字符。
▉ 第9~13行，进行判断，如果num 为负数，表示输入的字符已经超过了140这个上限，则还能输入多少字符的那个提示的数字变为红色，表示警示，否则还是黑色。那么不光是键盘按下，用户在用拼音输入法或者英文输入法打字完毕后，键盘会按起的，那么再调用keyup(function(e)方法，来进行同样的逻辑判断。这样就保证了在用户输入字符的时候，系统实时的检测输入的字符数。
（这个实时计算输入字符数的代码必须写在发布按钮点击那个代码块的上面）
调用jQuery 的get 方法，第一个参数”post.php ”，表示将参数信息传给这个PHP 服务器文件进行处理；第二个参数表示要传的数据，username 、title 和content ；第三个参数表示回调函数，这个函数的参数就是接收PHP 文件传回来的结果。如果传回的结果为success ，在页面弹出对话框显示发布成功，跳转到show.php 这个页面；如果传回fail ，提示失败，还是跳转到show.php 这个页面。这样就处理完了前端的所有事情。那么接下来看一看通过jQuery 的ajax 技术，把数据传到服务器的post.php 文件后做了哪些事情。
打开post.php 文
conn.php
post.php
首先看看conn.php 文件，这个文件是用来连接MySQL 数据库的。第2行，通过PHP 的系统函数mysql_connect( )与数据库建立连接，这个函数的参数分别是所连接的数据库名，用户名和密码。本项目中数据库名是localhost ，root 用户，密码为空。把这个连接传给一个变量$conn作为句柄，$conn=mysql_connect("localhost","root","");。然后调用PHP 系统函数mysql_select_db（）来打开数据库，里面的参数第一个是要连接的数据库实例，第二个参数是数据库连接的句柄。mysql_select_db("message",$conn);
接下来看post.php 文件。首先include （”conn.php ”），把数据库连接文件包含在这个业务逻辑的文件里，其实就类似于Java 中的导入包中的某个类。第3~5行，把从页面中通过get 方法拿来的数据赋给PHP 变量。第6行，创建一个$response变量，用于向页面返回信息。第7行，利用PHP 内部函数str_replace ( )把content 中的空格和换行符替换为HTML 中的空格和换行，以保证将来在页面中显示的时候能够正常空格和换行。第8行，运行一段insert 的SQL 语言，向数据库中的表插入一条记录，表示用户输入的信息。第10~14行，调用PHP 的系统函数mysql_query( )，
第一个参数是SQL 语句，第二个参数是数据库连接句柄。如果插入成功，则返回“success ”，否则返回“fail ”。第16行，返回业务逻辑处理的结果。第17行，关闭数据库连接，节省资源，应对更多的访问。
以上就是如何实现提交一条帖子的全过程。下面我们来看看如何在页面中显示数据库表中的内容。
打开show.php 文件
show.php
和post.php 文件类似，也是先引入数据库连接文件，然后执行一段查询的SQL 语句。通过mysql_fetch_row( 数据库查询结果 ) 这个函数取得查询的结果集，将这个结果集赋给一个变量$row。这个变量指向每一行记录，而每一行记录就是一个数组，数组的元素对应着select 语句所查询的字段顺序。通过while 循环将结果集的记录一条一条的输出，连同HTML 代码一起显示在页面上。最后不要忘记关闭数据库连接，这是一个好习惯。
其实动态网页的逻辑并不难，就是前端采集数据，进行数据验证，然后将请求提交到后端的服务器业务逻辑程序中进行处理，然后将处理的结果返回给前端，并进行显示。而本项目中用到的ajax 就是一个中间环节，是前端和后端的桥梁。也可以借助更加方便，封装性更好的框架来实现。
以上服务器端的业务逻辑代码，同样也可以用Java 语言来实现，请读者自己实验。
留言板的处理流程及其实现过程
项目背景
@本网站的《莘莘之音》节目中每一期节目下面的留言功能就是按照本文的思路实现的@
在日常的网站制作的项目中，往往会带上留言板的功能。主要的目的是让网站用户能够在本站进行留言，以此方式来进行社区化的交流。另一方面还可以让版主或者站长看到用户的意见建议和反馈，提升服务质量。
网站前端界面
这种界面在很多网站中都能够看到，最典型的就是微博类的社交网站。
通过Firefox 的firebug 插件分析后看到，新浪微博的这个输入框其实是HTML 中的标签。
这是我在页面里写的一段代码，看到在表单包围下，有一个标签和标签。其中里输入的是title ，即该留言的标题；标签输入的是留言的正文内容。
可以直接通过的属性来定义该标签的呈现方式，但还是建议通过CSS 来定义。这样可定义的内容更丰富，程序编写更灵活。
这里就是该标签的CSS 样式。
Width 和height ：直接定义了这个输入框的宽和高
Letter-spacing ：定义输入框中文字之间的间隔，为了美观最好还是不要让文字挤在一起。
Ling-heigh ：定义输入框中的行高，类似Word 中的段落间距的设置，也是为了美观。
Font-size ：定义文字的大小
Padding ：定义文字块距离输入框边界的距离，不要让文字离输入框边界太近，也是为了美观
下面重点来讲一下上图中剩下的三个CSS 属性。
resize
我们在HTML 文件中写入标签，然后在浏览器中打开，会看到在输入框右下角有两个45度的短线，意思是可以通过鼠标拖动这个短线来调整输入框的大小。
这种特性很灵活，但是往往在已经计算好尺寸的网页里不适用。因为用户任意改变输入框的尺寸，会影响页面中的其他元素的尺寸，从而影响整个页面的整体美观。所以我们通过CSS 让用户无法修改这个标签的尺寸。
在CSS 中写入resize:none
即重新改变尺寸为“否”。
这样处理后，在输入框右下角就不会出现这两个短线了。
overflow-x / overflow-y
文字如果在x 轴方向溢出，将如何处理？
我们在标签中输入的内容如果过长，则会进行相应的处理。我的这个实例中设置了overflow-x 的值为hidden 。表示如果文字溢出，在X 轴方向上隐藏不显示。而overflow-y 的值为auto ，表示如果文字太多，则会在输入框中自动加入滚动条。
类似于这样的效果。
后端业务逻辑
我们在上面的代码截图能够看到，我把标签写在了表单中了，这是因为在进行数据提交的时候，只有通过表单的方式，才能取到中的内容。
在表单外面写了两个
，作为操作的按钮。一个是提交内容，一个是重写。
这里捎带的讲解一下CSS3
的新属性，可以方便的修饰div 标签的外轮廓形状，让矩形的div 的轮廓变成圆角矩形。看到在这两个标签的CSS 属性中，有一条是border-radius ：50px ；表示的是轮廓的半径，这样做的结果就是div 变成了圆角矩形，这个值越大，矩形边缘的弧度就更大。
下面讲解通过jQuery 的ajax 方法，取得标签中的内容，然后提交给服务器端的一个PHP 文件进行业务逻辑的处理。 下图是发布按钮的单击事件的代码截图：
从代码第27行开始，通过$(".post")取得提交按钮的控制权，当这个标签发生了点击事件，则会触发下面的动作。$(".post").click(function(e)
▉ 28行——如果当用户名的这一栏为空值，则提示先登录，才能发布消息。对应这段代码
" name="username"> 这段代码是通过PHP 的超全局变量$_COOKIE来进行的。当用户登录成功后，PHP 程序会控制浏览器将用户的cookie 信息（username 和password ）写入到浏览器的cookie 文件中，当用户下次登录的时候，通过PHP 程序检测浏览器的cookie 内容，如果有对应的内容，则将网页的状态设置为该用户已登录，如果没有cookie 信息，则这个input 标签的value 的值为空，表示用户未登录。
▉ 30行——如果标题栏中的内容和正文输入框的为空或者输入的是连续的空格，则提示标题或正文不能为空。这里使用了jQuery 的正则表达式来验证字符串的内容。/^\s*$/ 表示以空格（space ）开始（^），并有一个或多个空格（*），而且以空格结束（$）。【关于jQuery 或javascript 的正则表达式的讲解，请参考本网站编程栏目的相关文章】
▉ 32行——如果num
▉ 34行——如果上面的条件都满足，表示用户的情况满足发布的要求，则在点击发布按钮的时候，进行ajax 异步操作。这里没有直接使用jQuery 的ajax （）方法，而是使用了它的简化版$.get（）方法。因为在表单标签中，我们定义了表单信息是以get 的方式提交的，，这种方式的特点是当用户提交时，会在浏览器地址栏中显示提交的信息，比如
http://www.ailin.net.cn/post.php?username=frank&password=123456&content=XXXXXXXX，这种方式比较快，但是不安全，因为全都走光了！！！
微博中默认只能输入140个字符，在输入字符的同时，系统会实时的检测用户输入的字数，如果超出了140这个显示，则提示，并无法发布。这种设计其实是新浪微博抄袭美国的twitter 的设计。这样做的用意是让用户用很少的字来说明事情，写完自己想说的事，这样让浏览者也能快速的舒服的看完你所发布的信息。因为现在的互联网阅读是碎片化的阅
读，在快速的生活节奏下，已经很少有能像读小说那样去欣赏，去体会大段文字的魅力了。另外的用意是，这样也逼迫着用户多发消息，多发帖子，有什么大事小情都发消息，从而让这个网站的内容更丰富，流量更大。
言归正传，那么如何能够实时的检测中的字数呢？jQuery 能够办到。首先在页面里用一个标签来显示还能输入的字数。
然后在js 文档中用jQuery 提供的键盘事件函数来计算字数的情况
▉ 第4行，首先定义一个全局变量maxWord ，表示能够输入的文字上限，赋值为140。
▉ 第5行，定义一个全局变量num ，用来存放还能输入的字符数。
▉ 第6行，给class 为num 的标签中放入maxWord 的值，表示当页面刚加载好的时候，在输入框下面就显示“您可以输入140个字符”
▉ 第7行，$(".content").keydown(function(e)，输入框的键盘按下事件出发keydown 方法，执行相应的操作。 ▉ 第8行，让maxWord 的值减去当前输入框的字符的长度，就得到了还能够输入多少字符。
▉ 第9~13行，进行判断，如果num 为负数，表示输入的字符已经超过了140这个上限，则还能输入多少字符的那个提示的数字变为红色，表示警示，否则还是黑色。那么不光是键盘按下，用户在用拼音输入法或者英文输入法打字完毕后，键盘会按起的，那么再调用keyup(function(e)方法，来进行同样的逻辑判断。这样就保证了在用户输入字符的时候，系统实时的检测输入的字符数。
（这个实时计算输入字符数的代码必须写在发布按钮点击那个代码块的上面）
调用jQuery 的get 方法，第一个参数”post.php ”，表示将参数信息传给这个PHP 服务器文件进行处理；第二个参数表示要传的数据，username 、title 和content ；第三个参数表示回调函数，这个函数的参数就是接收PHP 文件传回来的结果。如果传回的结果为success ，在页面弹出对话框显示发布成功，跳转到show.php 这个页面；如果传回fail ，提示失败，还是跳转到show.php 这个页面。这样就处理完了前端的所有事情。那么接下来看一看通过jQuery 的ajax 技术，把数据传到服务器的post.php 文件后做了哪些事情。
打开post.php 文
conn.php
post.php
首先看看conn.php 文件，这个文件是用来连接MySQL 数据库的。第2行，通过PHP 的系统函数mysql_connect( )与数据库建立连接，这个函数的参数分别是所连接的数据库名，用户名和密码。本项目中数据库名是localhost ，root 用户，密码为空。把这个连接传给一个变量$conn作为句柄，$conn=mysql_connect("localhost","root","");。然后调用PHP 系统函数mysql_select_db（）来打开数据库，里面的参数第一个是要连接的数据库实例，第二个参数是数据库连接的句柄。mysql_select_db("message",$conn);
接下来看post.php 文件。首先include （”conn.php ”），把数据库连接文件包含在这个业务逻辑的文件里，其实就类似于Java 中的导入包中的某个类。第3~5行，把从页面中通过get 方法拿来的数据赋给PHP 变量。第6行，创建一个$response变量，用于向页面返回信息。第7行，利用PHP 内部函数str_replace ( )把content 中的空格和换行符替换为HTML 中的空格和换行，以保证将来在页面中显示的时候能够正常空格和换行。第8行，运行一段insert 的SQL 语言，向数据库中的表插入一条记录，表示用户输入的信息。第10~14行，调用PHP 的系统函数mysql_query( )，
第一个参数是SQL 语句，第二个参数是数据库连接句柄。如果插入成功，则返回“success ”，否则返回“fail ”。第16行，返回业务逻辑处理的结果。第17行，关闭数据库连接，节省资源，应对更多的访问。
以上就是如何实现提交一条帖子的全过程。下面我们来看看如何在页面中显示数据库表中的内容。
打开show.php 文件
show.php
和post.php 文件类似，也是先引入数据库连接文件，然后执行一段查询的SQL 语句。通过mysql_fetch_row( 数据库查询结果 ) 这个函数取得查询的结果集，将这个结果集赋给一个变量$row。这个变量指向每一行记录，而每一行记录就是一个数组，数组的元素对应着select 语句所查询的字段顺序。通过while 循环将结果集的记录一条一条的输出，连同HTML 代码一起显示在页面上。最后不要忘记关闭数据库连接，这是一个好习惯。
其实动态网页的逻辑并不难，就是前端采集数据，进行数据验证，然后将请求提交到后端的服务器业务逻辑程序中进行处理，然后将处理的结果返回给前端，并进行显示。而本项目中用到的ajax 就是一个中间环节，是前端和后端的桥梁。也可以借助更加方便，封装性更好的框架来实现。
以上服务器端的业务逻辑代码，同样也可以用Java 语言来实现，请读者自己实验。