#1.页面组成
- 一个后台页面 manage.jsp
- 一个前台展示页面 index.jsp
- 一个用于处理的LivingRoom(Servlet)
- 由于我们的后台管理页面和展现页面都需要一个展示信息的框,所以,我们采用了动态include,所以还需要一个content.jsp
//manage.jsp
<table>
<tr style="height: 10%">
<th colspan="2">NBA直播室后台</th>
</tr>
<tr style="height: 83%">
<td colspan="2"><jsp:include page="content.jsp" flush="true"></jsp:include></td>
</tr>
<tr style="height: 7%">
<td style="85%"><input type="text" name="content" class="content" id="content"></td>
<td><input type="button" value="发表" class="btn"></td>
</tr>
</table>
//content.jsp
<body>
<textarea id="showMsg" style="width:100%;height:100%;resize:none;font-size:16px;readonly:true" ></textarea>
</body>
//index.jsp
<table>
<tr style="height: 10%">
<th colspan="2">NBA直播室</th>
</tr>
<tr style="height: 90%">
<td colspan="2"><jsp:include page="manage/content.jsp" flush="true"></jsp:include></td>
</tr>
</table>
2.具体的实现(采用ajax+java+jquery)
- 当我们点击发送按钮的时候,我们希望请求servlet,将我们的输入框中的内容传到后台,后台将数据写进一个文件中,(在数据)
$(function(){
$(".btn").click(function(){
var content = $(".content").val();
if(validate()){
$.ajax({
method:"post",
url:"LivingRoom",
//data包括内容,以及一个标记,因为我们还有一个是要展示,同样请求同一个url,加入r是为了避免网页缓存
data:"content="+content+"&flag=send"+"&r="+new Date(),
dataType:"json",
success:function(data){
//接收后台返回的值
if(data == 1){
//清除输入框中的内容并获得焦点
$(".content").val("").focus();
}
},
error:function(){
alert("数据提交错误,请稍后再试!");
}
});
}
});
});
//验证函数
function validate(){
var reg = "/^\s+|\s+$/g";
var content = document.getElementById("content").value;
if(content.replace("reg","").length<1){
alert("需要输入内容后,才能发表!");
return false;
}
return true;
}
- 在servlet中,我们根据flag来判断,我们具体应该做的操作,有可能是写入,有可能是展示
String flag = request.getParameter("flag");
//获取存储文件的根路径
String path = request.getSession().getServletContext().getRealPath("record");
SimpleDateFormat sdf = new SimpleDateFormat("YYYY-MM-dd");
String fileName = sdf.format(new Date())+".dat";
path = path + "/" + fileName;
if("send".equals(flag)){
send(request,response,path);
}else if("show".equals(flag)){
show(request,response,path);
}
- 如果是我们发送数据,则调用send函数,其中path,代表是我们写入的地址
//获得传送过来的内容
String content = request.getParameter("content");
//输出
PrintWriter out = response.getWriter();
//拼接内容
SimpleDateFormat sdf = new SimpleDateFormat("[HH:mm:ss]");
content = sdf.format(new Date()) + ":" + content;
//定义文件输出流
BufferedWriter bw = null;
//向record目录中写入
try {
bw = new BufferedWriter(new FileWriter(path,true));
bw.write(content);
bw.newLine();
bw.flush();
//如果成功
out.println(1);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}finally{
try {
bw.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
- 经过上面,我们便可以将输入的内容写进文件,接下来,我们便需要展示我们的输入,这个功能我们在content.jsp中,进行ajax请求servlet,这里用的是get请求,也符合我们一般用ajax的习惯
//获得展示后台输入内容效果
$(function(){
function show(){
$.ajax({
method:"get",
url:"LivingRoom?flag=show",
data:null,
dataType:"text",
success:function(data){
$("#showMsg").val(data);
},
error:function(){
alert("数据请求错误,请稍后再试!");
}
});
}
//设置每隔500ms函数执行一次,达到数据快速更新
setInterval(show,500);
});
- 然后我们看下servlet中的代码
//读取文件中的内容,返回到页面
//设置我们返回数据字符类型,不这样,网页会出现乱码
response.setCharacterEncoding("utf-8");
StringBuilder builder = new StringBuilder();
BufferedReader br = null;
PrintWriter pw = response.getWriter();
try {
br = new BufferedReader(new FileReader(path));
String msg = "";
while((msg = br.readLine()) != null){
builder.append(msg+"\r\n");
}
pw.println(builder.toString());
pw.flush();
pw.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
- 这样我们的直播室就这样完成了,其中css代码我没有放上来。