后台界面实时获取用户输入内容，springMVC+Ajax实现（源码）

来源：互联网发布：航线保持算法编辑：程序博客网时间：2024/06/10 23:29

项目结构：

核心代码：（文章最后提供源码下载链接！！！）

SpringMVC所需jar包，controller配置文件 jquery文件等均在源码提供

SpringMVC中Controller写法：

package com.controller;import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStreamReader;import java.io.OutputStreamWriter;import javafx.application.Application;import javax.servlet.ServletContext;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import org.springframework.http.HttpRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;@Controllerpublic class InputController {//输入端调用@RequestMapping(value = "/sendcontent.do", method = RequestMethod.POST)@ResponseBodypublic String getContent(String info, HttpSession session) {// 属性驱动System.out.println("getNameAndAge");System.out.println(info);// 保存位置根目录String root_path = session.getServletContext().getRealPath("info");File file = new File(root_path);if (!file.exists()) {file.mkdirs();}//创建文件保存用户输入信息，实现数据共享以及记录保存File file_info = new File(file, "info.txt");try {if (!file_info.exists()) {file_info.createNewFile();}BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file_info, false)));bw.write(info);//将内容写入文件bw.flush();bw.close();} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return info;}//获取端调用@RequestMapping(value = "/getcontent.do", method = RequestMethod.POST, produces = "text/html;charset=UTF-8;")@ResponseBodypublic String SendContent(String info, HttpSession session) {// 属性驱动String read_content = "";// 保存位置根目录String root_path = session.getServletContext().getRealPath("info");File file = new File(root_path);if (!file.exists()) {file.mkdirs();}//从文件中读出信息File file_info = new File(file, "info.txt");try {if (!file_info.exists()) {file_info.createNewFile();}BufferedReader bfr = new BufferedReader(new InputStreamReader(new FileInputStream(file_info)));String str = bfr.readLine();bfr.close();read_content = str;} catch (FileNotFoundException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}System.out.println(read_content);return read_content;}}

Listener写法：

package com.listener;import java.io.File;import java.io.FileWriter;import java.io.IOException;import javax.servlet.ServletContextEvent;import javax.servlet.ServletContextListener;import org.apache.commons.io.FileUtils;public class StartListener implements ServletContextListener {@Overridepublic void contextDestroyed(ServletContextEvent arg0) {// TODO Auto-generated method stub}@Overridepublic void contextInitialized(ServletContextEvent arg0) {// TODO Auto-generated method stub// 保存位置根目录System.out.println("start");String root_path = arg0.getServletContext().getRealPath("info");File file = new File(root_path);//实现初始化文件信息if (file.exists()) {try {FileUtils.deleteDirectory(file);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}

web.xml中配置Listener

<listener>   <listener-class>com.listener.StartListener</listener-class></listener>

client.jsp配置

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>客户端输入：<br><input style='height: 200px; width: 1000px' name="info" id="content" /><br /><script src="js/jquery-3.2.1.min.js" type="text/javascript"></script><script type="text/javascript" charset="UTF-8">window.onload = function() {document.getElementById("content").focus();}$('#content').bind('input propertychange', function() {UpContent();});function UpContent() {var Content = document.getElementById('content').value;$.ajax({type : "post",url : "sendcontent.do",dataType : "text",async : false,data : {"info" : Content,},success : function(data) {},error : function(e) {alert("请求失败！");}});}</script></body></html>

server.jsp配置：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style>#show {width: 1000px;min-height: 200px;margin: 0 auto;border: 1px solid #000;margin: 0 auto;}</style></head><body>服务端实时获取客户端输入的内容：<br><div id="show"></div><br><a id="download" href="<%=request.getServletContext().getContextPath()%>/info/info.txt" download >下载记录</a><script src="js/jquery-3.2.1.min.js" type="text/javascript"></script><script type="text/javascript" charset="UTF-8">$(document).ready(function() {setInterval("GetContent()", 1000);//setInterval这个函数会根据后面定义的1000既每隔1秒执行一次前面那个函数//如果你用局部刷新，要用AJAX技术});function GetContent() {$.ajax({type : "post",url : "getcontent.do",dataType : "text",async : false,data : {},success : function(data) {$("#show").html(data);},error : function(e) {alert("请求失败！");}});}</script></body></html>

JavaWeb开发环境下载地址：

点击打开链接

源码下载：

源码中含有ssm项目所有jar包，运行环境为Eclipse JavaEE版，服务器为TomCat7.0

微信扫码关注回复1120立刻获取下载地址，非常感谢您的支持~

CSDN下载地址:

点击打开链接

阅读全文

0 0