后台界面实时获取用户输入内容，springMVC+Ajax实现（源码）
2017-10-27 16:52
676 查看
项目结构：
核心代码：（文章最后提供源码下载链接！！！）
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;
@Controller
public class InputController {
//输入端调用
@RequestMapping(value = "/sendcontent.do", method = RequestMethod.POST)
@ResponseBody
public String getContent(String info, HttpSession session) {// 属性驱动
System.out.println("getNameAndAge");
System.out.println(info);
// 保存位置根目录
String root_path = session.getServletContext().getRealPath("info");
File file
b478
= 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 block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return info;
}
//获取端调用
@RequestMapping(value = "/getcontent.do", method = RequestMethod.POST, produces = "text/html;charset=UTF-8;")
@ResponseBody
public 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 block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.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 {
@Override
public void contextDestroyed(ServletContextEvent arg0) {
// TODO Auto-generated method stub
}
@Override
public 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 block
e.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开发环境下载地址：
点击打开链接
[b][b]源码下载：
[/b][/b]
[b]源码中含有ssm项目所有jar包，运行环境为Eclipse JavaEE版，服务器为TomCat7.0[/b]
[b][b]微信扫码关注回复1120立刻获取下载地址，非常感谢您的支持~[/b][/b]
[b][b]CSDN下载地址:[/b][/b]
[b]点击打开链接
[/b]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- spring mvc+jQuery ajax 实现后台数据实时返回前端
- spring boot+mvc+mybatis(通用mapper)+druid+jsp+bootstrap实现后台权限管理系统源码
- 1， 编写程序，当用户在文本框中输入内容之后，单机不同的按钮，能够把文半框中的内容粘贴到文本区中。“重置”按钮实现将文本框和文本区中的内容清空。界面上的文本区只能显示内容，不能让用户输入文本。运行结果
- SpringBind对象到页面时，用ajax提交form表单内容，后台无法获取绑定对象问题
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中(ZT)
- Ext 在线实时聊天系统的开发，有源码包，实现了实时更新在线用户列表和群聊
- Java程序练习：设计用户输入界面,获取网址采集规则
- 利用sender的Parent获取GridView中的当前行 不用AJAX实现前台JS调用后台C#方法(小技巧) AjaxControlToolkit的CalendarExtender的本地化
- 让ajax更加友好的实现方法(实时显示后台处理进度。)
- dhl：ASP.NET MVC + Jquery实现Ajax下拉框数据2或3级联动（+用户控件）
- myOpenChord 界面数据后台线程获取，动态显示实现
- jquery+php实现用户输入搜索内容时自动提示
- JQuery遮罩层登录界面实现（AJAX+ASP.NET实现登录验证，源码下载）
- js实现前台动态添加文本框，后台获取文本框内容
- 自学MVC（九）：jquery里实现ajax无刷新发表评论,和异步获取评论,带loading-2009年05月22日
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- Ajax实现定时刷新,获取后台数据(实现技术ASP)
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- [导入]Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中