php+jquery+ajax创建简单聊天室

PHP+jquery+ajax创建聊天室

技能点:php操作mysql的增删改查,使用json来传递数据,数据类型转换的几种方法,jquery的ajax方法

做了一个简单的聊天室,如图所示:


代码详见我的github: 
https://github.com/cyanar/little-chat-room

 

 

首先要创建数据库:

  CREATE TABLE IF NOT EXISTS `chat` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`username` varchar(20) DEFAULT NULL,
`chatdate` time DEFAULT NULL,
`msg` varchar(500) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=124 ;
 

写完了发现没有什么技术难点,唯一需要注意的是json数据及数据转换:

如其中的一部分代码:

 $sql = "SELECT * FROM chat ORDER BY ID DESC";
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());
$array = array("result"=>array());

while($row = mysql_fetch_array($result)){
array_push($array["result"],json_encode($row));
}
echo json_encode($array);

这一段php代码是从数据库获取信息并传给前端,主要是创建一个数组,并把数据库信息传到数组里最后用json_encode()方法转成字符串传到前端。

 $.get("chat_recv.php",function(data){
$("#chat").html("");
var obj = eval("("+data+")");
var array = obj.result;
for(var i=0;i<array.length;i++){
var obj2 = eval("("+array[i]+")");
var time = "<span class = time>"+obj2.chatdate+"</span>";
$("#chat").append($("<p>"+time+" "+obj2.username+":"+obj2.msg+"</p>"));
}
})

然后前端将获取到的字符串通过eval()方法转换成对象,再取值就能取到所需的值.

posted @ 2017-06-20 22:00  circe  阅读(...)  评论(...编辑  收藏