HTML前端代码
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="/luci/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="msg"></div>
<input id="btn" type="button" value="接收测试" />
<br>
<input id="btn-input-imei" type="text" class="form-control-imei input-md" placeholder="输入IMEI" />
<input id="btn-input-msg" type="text" class="form-control-msg input-md" placeholder="输入发送hex字符串" />
<button class="btn btn-success btn-md" id="btn-chat">发送回复测试</button>
<div id="send_msg"></div>
<script type="text/javascript" >
$(function(){
$("#btn").bind("click",{btn:$("#btn")},function(evdata){
$.ajax({
type:"POST",
dataType:"json",
url:"back.php",
timeout:80000, //ajax请求超时时间80秒
data:{IMEI_GET:"80"}, //40秒后无论结果服务器都返回数据
success:function(data,textStatus){
//从服务器得到数据，显示数据并继续查询
if(data.success=="1"){
$("#msg").append("<br>[有数据]"+data.text);
evdata.data.btn.click();
}
//未从服务器得到数据，继续查询
if(data.success=="0"){
$("#msg").append("<br>[无数据]");
evdata.data.btn.click();
}
},
//Ajax请求超时，继续查询
error:function(XMLHttpRequest,textStatus,errorThrown){
if(textStatus=="timeout"){
$("#msg").append("<br>[超时]");
evdata.data.btn.click();
}
}
});
});
});
</script>
<script type="text/javascript">
$(function(){
$("#btn-chat").click(function(){
$.ajax({
url:'back.php',
type:'post',
data:{"IMEI":$("#btn-input-imei").val(),"MSG":$("#btn-input-msg").val()}, //拼装json数组
// data:$("#fm").serialize(), //直接从form表单中取出数组
dataType:"JSON",
success:function(msg){
if(msg) {
// $("p").append("IMEI：" + msg.IMEI + "<br />" + "数据恢复：" + msg.MSG );
$("#send_msg").append("IMEI：" + msg.IMEI + "<br />" + "数据恢复：" + msg.MSG + "<br>");
}
else {
alert("输入异常!");
}
},
error:function(){
console.log("ERROR");
}
});
});
});
</script>
<div id="example">
<h3 id="example_title">将滚动条（scrollbar）保持在最底部的方法</h3>
<div id="example_main">
<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
div.scrollTop = div.scrollHeight;//主要 需要指定高度度
}
</script>
<span>请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。</span><br />
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">
</div>
<input type="button" value="插入一行" onclick="add();">
</div>
</div>
</body>
</html>PHP后端代码
server_get.php
<?php
if (isset($_POST['IMEI']) && isset($_POST['MSG'])) {
function validate($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$IMEI = validate($_POST['IMEI']);
$MSG = validate($_POST['MSG']);
$json = array("IMEI"=>$IMEI, "MSG"=>$MSG); //组合成json数组
$data = json_encode($json); //编译数组转化为json数据
echo $data; //将json数据传回网页
}
elseif(isset($_POST['IMEI_GET']))
{
set_time_limit(0);//无限请求超时时间
$i=0;
while (true){
//sleep(1);
usleep(500000);//0.5秒
$i++;
//若得到数据则马上返回数据给客服端，并结束本次请求
$rand=rand(1,999);
if($rand<=15){
$arr=array('success'=>"1",'name'=>'xiaoyu','text'=>$rand);
echo json_encode($arr);
exit();
}
//服务器($_POST['time']*0.5)秒后告诉客服端无数据
if($i==$_POST['IMEI_GET']){
$arr=array('success'=>"0",'name'=>'xiaoyu','text'=>$rand);
echo json_encode($arr);
exit();
}
}
}
else {
exit();
}
?>
发表评论