PHP代码
php后台文件请参考<?php
$back=array();
$back[0]=$_GET['name'];
$back[1]=$_GET['day'];
echo json_encode($back);
>
html代码
<!doctype html>
<html>
<head>
<title></title>
<style>
.zs{width:100%;height:600px;background:#ccc;}
.zs h2{text-align:center; padding:10px; background:#666;}
#lyzs{width:95%;height:520px; margin:0 auto;margin-top:-10px; overflow:auto;}
#name{float:left;}
#day{float:right;}
</style>
<script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<label>留言：</label>
<input type="text" id="text"/>
<input type="button" value="提交留言" id="btnClick" />
<span id="zt"></span>
</div>
<div class="zs">
<h2>留言板</h1>
<div id="lyzs">
<div id="name"></div>
<div id="day"></div>
</div>
</div>
<script>
$(function(){
//ajax开始传输
$("#btnClick").ajaxStart(function(){
$("#zt").html("正在传输ajax");
});
$("#btnClick").ajaxStop(function(){
$("#zt").html("传输完成");
});
//ajax
$("#btnClick").click(function(){
var txt=$("#text");
if(txt.val()==""){
alert("请输入内容");
}else{
$.ajax({
url:"indexs.php",
type:"GET",
dataType:"json",
data:{name:txt.val(),day:get_day()},
success:function(data){
txt.empty();
var ht=$("#name").html();
var day=$("#day").html();
ht+=data[0]+"<br/>";
day+=data[1]+"<br/>";
$("#name").html(ht);
$("#day").html(day);
}
});
}
});
//获取时间定义
function get_day(){
var t=new Date();
var y=t.getFullYear();
var m=t.getMonth();
var d=t.getDate();
var h=t.getHours();
var f=t.getMinutes();
var s=t.getSeconds();
var wek=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week=t.getDay();
var weekd=wek[week];
var time=y+"年"+m+"月"+d+"日"+h+"时"+f+"分"+s+"秒"+weekd;
return(time);
};
})(jQuery);
</script>
</body>
</html>
