php echo$_COOKIE["username"];?
>"name="username">
这段代码是通过PHP的超全局变量$_COOKIE来进行的。
当用户登录成功后,PHP程序会控制浏览器将用户的cookie信息(username和password)写入到浏览器的cookie文件中,当用户下次登录的时候,通过PHP程序检测浏览器的cookie内容,如果有对应的内容,则将网页的状态设置为该用户已登录,如果没有cookie信息,则这个input标签的value的值为空,表示用户未登录。
▉ 30行——如果标题栏中的内容和正文输入框的为空或者输入的是连续的空格,则提示标题或正文不能为空。
这里使用了jQuery的正则表达式来验证字符串的内容。
/^\s*$/表示以空格(space)开始(^),并有一个或多个空格(*),而且以空格结束($)。
【关于jQuery或javascript的正则表达式的讲解,请参考本网站编程栏目的相关文章】
▉ 32行——如果num<0,则提示已经超出了输入字数的上限。
这里我们先来看看新浪微博里的小功能,但是很提升用户体验。
▉ 34行——如果上面的条件都满足,表示用户的情况满足发布的要求,则在点击发布按钮的时候,进行ajax异步操作。
这里没有直接使用jQuery的ajax()方法,而是使用了它的简化版$.get()方法。
因为在表单标签中,我们定义了表单信息是以get的方式提交的,,这种方式的特点是当用户提交时,会在浏览器地址栏中显示提交的信息,比如
微博中默认只能输入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语言来实现,请读者自己实验。