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>