Jquery实现注册和上一页、下一页的局部刷新以及文件的上传
实现注册页面的局部刷新：
1、regist.jsp页面
<%--
注册实例:当用户填写了要注册的用户名后 需要及时提醒用户该用户名是否可以注册
穿越火线:昵称不可重复
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<!--想要使用jquery的话 需要向页面中导入一个jquery的库文件-->
<script src="js/jquery-1.12.4.js"></script>
//jquery方式实现局部刷新
<script type="text/javascript">
function existsUser() {
var username=$("[name='username']").val();
$.ajax({
url:"UserServlet",
method:"get",
data:{"username":username},
success:function (data) { //正常响应所触发的事件
var flag=eval("("+data+")");
if(flag){
$("span").css("color","green");
$("span").text("可以注册")
}else{
$("span").css("color","red");
$("span").text("用户名已存在,不能注册!")
}
}
})
}
</script>
//ajax方式实现局部刷新
<script type="text/javascript">
//XMLHttpRequest
function existsUser(){
//1:实例化核心对象
var xhr=new XMLHttpRequest();
//1.5 获取表单元素的value值
var username=document.getElementsByName("username")[0].value;
//2:设置请求参数
xhr.open("get","UserServlet?username="+username);
//3:发送请求
xhr.send(null);
//4:获取服务器的响应,(回调事件)
xhr.onreadystatechange=function () {
//5:获取的就是服务器响应的数据
if(xhr.readyState==4&&xhr.status==200){
var flag=xhr.responseText;
var isExists=eval("("+flag+")");//类型格式化
var span=document.getElementsByTagName("span")[0];
if(isExists){
//用户名不存在 可以注册
span.style.color="green";
span.innerText="可以注册!";
}else{
//用户名已存在 不能注册
span.style.color="red";
span.innerText="用户名已存在 不能注册!";
}
}
}
}
</script>
</head>
<body>
<form>
注册名:<input type="text" name="username" onblur="javascript:existsUser();"/><span></span>
<input type="submit" value="提交">
</form>
</body>
</html>
2、UserServlet
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { UserService userService=new UserServiceImpl(); String username=req.getParameter("username"); boolean b = userService.existsUser(username); //将返回值响应给客户端 PrintWriter writer = resp.getWriter(); writer.print(b); writer.flush(); writer.close(); }
实现上下翻页和页面内容的局部刷新：
1、Page.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () { //等同于window.onload
page(1);
})
function page(pageindex) {
$.ajax({
url:"PageServlet",
method:"post",
data:{"pageindex":pageindex},
dataType:"json",
success:function (data) {
var htmls=["<tr><td>新闻标题</td><td>创建时间</td></tr>"];
$("table").empty();//清除table中的元素
$.each(data.lists,function (i,item) {
htmls[i+1]="<tr><td>"+item.ntitle+"</td><td>"+item.ncreateDate+"</td></tr>";
})
$("table").html(htmls);
var prev=$("<a href='#' onclick='page("+(data.pageindex-1)+")'>上一页</a>");
var next=$("<a href='#' onclick='page("+(data.pageindex+1)+")'>下一页</a>");
$("table").append(prev);
$("table").append(next);
},
})
}
</script>
</head>
<body>
<table border="1px solid">
</table>
</body>
</html>
2、PageServlet
@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setCharacterEncoding("utf-8");//设置响应时编码 //对页码的判断 int index=req.getParameter("pageindex")==null?1:Integer.parseInt(req.getParameter("pageindex")); NewsService service=new NewsServiceImpl(); Page<News> newsPage = service.getNewsPage(index, 5); //将page对象转换为JSON字符串 String string = JSONObject.toJSONStringWithDateFormat(newsPage,"yyyy-MM-dd HH:mm:ss"); resp.getWriter().write(string); resp.getWriter().flush(); resp.getWriter().close(); }
文件的上传：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="uploadFile.jsp" method="post" enctype="multipart/form-data">
上传人姓名：<input type="text" name="uname"/>
选择文件1：<input type="file" name="upload"/>
选择文件2：<input type="file" name="upload"/>
<input type="submit" value="提交">
</form>
</body>
</html>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>
<%@ page import="java.util.List" %>
<%@ page import="org.apache.commons.fileupload.FileItem" %>
<%@ page import="java.util.Arrays" %>
<%@ page import="java.io.File" %>
<%@ page import="org.apache.commons.fileupload.FileUploadBase" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
try {
request.setCharacterEncoding("utf-8");
//1.获取upload目录的绝对路径
String realPath = session.getServletContext().getRealPath("/upload");
//1.5实例化FileItem工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(8 * 1024);
//2.ServletFileUpload 核心对象
ServletFileUpload fileUpload = new ServletFileUpload(factory);
fileUpload.setFileSizeMax(20*1024);//单个文件的大小限制
fileUpload.setSizeMax(200*1024);//总上传量的大小限制
//3.解析发送的请求 获取FileItem集合
List<FileItem> fileItems = fileUpload.parseRequest(request);
/*
* get():获取表单的非文件value值
* getName():获取文件域中的文件姓名
* getFieldName:获取的是表单元素的name属性
*/
List<String> strings = Arrays.asList(".png", ".jpg",".txt");
//允许上传的数据格式的集合
for (FileItem item : fileItems) {
//每一个FileItem都是一个表单项,首要的任务就是我如何区分表单中的普通表单项和文件表单项
if (item.isFormField()) {
//此item是一个普通的表单字段
String string = new String(item.get(), "utf-8");
out.print(string + "上传了文件");
} else {
//文件字段
//获取用户要上传的文件名
String fileName = item.getName();
//获取文件后缀名
String substring = fileName.substring(fileName.lastIndexOf("."));
if (strings.contains(substring)) {
out.print(fileName);
//拼接成一个完整的地址
File file = new File(realPath, fileName);
item.write(file);
} else {
out.print("您要上传的文件格式不正确，请重新选择！");
break;
}
}
}
}catch (FileUploadBase.FileSizeLimitExceededException e){
out.print("文件过大，请重新选择！");
}
%>
</body>
</html>
浙公网安备 33010602011771号