jsp+servlet實現簡單的直播室

時間 2019-11-09

標籤 jsp+servlet jsp servlet 實現簡單直播欄目 JSP 简体版

原文原文鏈接

#1.頁面組成css

一個後臺頁面 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代碼我沒有放上來。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。