<!DOCTYPE HTML>
<html>
<head>
<title>反ajax推送</title>
<style>
.send{color:#555;text-align: left;}
.
require
{color:blue;text-align: right;}
.content_box{text-align: center;margin: 20px;
border: 1px solid #ddd;padding: 20px;}
</style>
<script src=
"http://code.jQuery.com/jquery-1.11.2.min.js"
></script>
</head>
<body>
<p
class
=
"content_box"
id=
"content_box_title"
style=
"border: none;"
>消息框</p>
<p
class
=
"content_box"
id=
"content_box"
>
</p>
<p style=
"width: 450px;margin: 0 auto;"
>
<select id=
"username"
style=
"font-size: 20px;"
>
<option value=
"1"
selected=
"selected"
>1</option>
<option value=
"2"
>2</option>
</select>
<input type=
"text"
style=
"font-size: 20px;"
value=
""
id=
"send_text"
>
<button id=
"btn_send"
style=
"font-size: 20px;"
>发送</button>
<button id=
"btn_link"
style=
"font-size: 20px"
>连接</button>
</p>
<p
class
=
"error_tip"
id=
"error_tip"
style=
"color: red;"
>
</p>
<script>
$(
function
(){
$(
'#btn_send'
).click(
function
(){
var
send_text = $(
'#send_text'
).val();
if
(send_text.length <= 0){
$('#error_tip').html('不能输入空值');
}
else
{
send(send_text);
}
});
$('#send_text').on('keyup',
function
(e){
if
(e.keyCode == 13){
$('#btn_send').trigger('click');
}
});
$('#btn_link').click(
function
(){
connect();
var
_this = $(this);
_this.attr('disabled',true);
_this.html('已连接');
});
});
function
connect(){
$('#content_box_title').html($('#username').val()+'的消息窗口');
$.ajax({
data:{'user':$('#username').val()},
url:'ajaxPush.PHP',
type:'get',
timeout:0,
dataType:'json',
success:
function
(data){
$('#content_box').append('<p
class
=
"require"
>
'+data.msg+'
</p>');
connect();
}
});
}
function
send(massege){
var
user =$(
'#username'
).val();
$.getJSON(
'write.php'
,{
'msg'
:massege,
'user'
:user},
function
(data){
if
(data.sf){
$(
'#content_box'
).append(
'<p class="send">'
+massege+
'</p>'
);
$(
'#send_text'
).val(
''
);
}
else
{
$(
'#error_tip'
).html(
'输入保存错误!'
);
}
});
}
</script>
</body>
</html>