使用jquery发送Ajax请求的几种异步刷新方式

最新推荐文章于 2022-03-14 17:15:11 发布

青云交

最新推荐文章于 2022-03-14 17:15:11 发布

阅读量1.9k

点赞数 7

分类专栏： myeclipse 教学 tomcat jquery ajax 文章标签：登录验证 ajax校验 ajax和json技术 ajax异步的HTML ajax异步的getJSON

本文链接：https://blog.youkuaiyun.com/atgfg/article/details/99962212

版权

教学同时被 3 个专栏收录

10 篇文章

订阅专栏

tomcat

3 篇文章

订阅专栏

myeclipse

1 篇文章

订阅专栏

本博客地址 | GitHub | 小站坐坐

1.需求1:
第一种方式实现ajax异步刷新--ajax
2.需求2:
第二种方式实现ajax异步刷新--get
3.需求3:
第三种方式实现ajax异步刷新--post
4.需求4:
第四种方式实现ajax异步刷新--getJSON
5.需求5:
第五种使用jquery发送Ajax请求 html
   实现html类型传递数据的步骤:
   1.管理员登录成功直接进入管理员list.jsp页面,这个页面是发送ajax请求的页面
   2.管理员首页通过Ajax技术加载相关用户数据
   3.servlet调用javaBean进行数据处理,直接生成展示所需的HTML片段,然后转发到newList.jsp页面上
   4.在管理list.jsp页面直接使用响应的HTML片段
6.请求路径:
  http://localhost:9999/java6_chapter912_ajax_jquery3/ajaxtest_base.jsp
   http://localhost:9999/java6_chapter912_ajax_jquery3/login.jsp
   http://localhost:9999/java6_chapter912_ajax_jquery3/list.jsp
7.演示地址:
http://myxyz.com.cn/java6_chapter912_ajax_jquery3/ajaxtest_base.jsp
http://myxyz.com.cn/java6_chapter912_ajax_jquery3/login.jsp
http://myxyz.com.cn/java6_chapter912_ajax_jquery3/list.jsp

注意: login.jsp的用户名: aa 密码: aa

8.如有疑问可以

   加我QQ：   1050968899
   或
   微信：   QingYunJiao

   或加群:　

   600260138　JAVA技术交流&资源分享　
   636187852　Java技术交流分享群

9.项目结构:

10. 关键的代码:

Servlet关键代码
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doPost-----UserServlet---doPost--->"); request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String method = request.getParameter("method"); PrintWriter out = response.getWriter(); if ("ajaxhtml".equals(method)) { System.out.println("ajaxhtml------------------------------------>"); // 调用javaBean的方法 User user = new User(); UserService service = new UserServiceImpl(); List<User> userAll = service.getUserAll(); request.setAttribute("user", userAll); request.getRequestDispatcher("newList.jsp").forward(request, response); } else if ("ajaxjson".equals(method)) { String uname = request.getParameter("uname"); String upass = request.getParameter("upass"); // 判断：注意第二个equals判断是否加了！ if (uname == null && uname.equals("")) { // 返回页面提示信息 out.print("1"); } else if (upass == null && upass.equals("")) { // 返回页面提示信息 out.print("2"); } else { // 1.去数据库里查询是否有这个用户和密码 User user = new User(); user.setUname(uname); user.setUpass(upass); UserService service = new UserServiceImpl(); User users = service.getUserByUnameAndUpass(user); if (users != null && !users.equals("")) { request.getSession().setAttribute("user", user); List<User> userAll = service.getUserAll(); StringBuffer json = new StringBuffer("["); for (int i = 0; i < userAll.size(); i++) { User u = userAll.get(i); // [{"id":"1","uname":"aa","upass":"aa"},{"id":"2","uname":"bb","upass":"bb"}] // 集合数据拼接成json数组 String str = "{\"id\":\"" + u.getId() + "\",\"uname\":\"" + u.getUname() + "\",\"upass\":\"" + u.getUpass() + "\"}"; json.append(str); if (i < userAll.size() - 1) { json.append(","); } } json.append("]"); out.print(json); } else { out.print("3"); } } out.close(); // 统计人数的相应业务的处理 } else if ("listener2".equals(method)) { System.out .println("listener2------------------------------------>"); String uname = request.getParameter("uname"); // 判断：注意第二个equals判断是否加了！ if (uname != null && !uname.equals("")) { User user = new User(); user.setUname(uname); request.getSession().setAttribute("user", user); // 加listener2 是因为我把success放在listener2目录下： response.sendRedirect("listener2/success.jsp"); } else { // 返回页面提示信息 request.setAttribute("mess", "用户名不能为空"); System.out.println(1111); System.out.println("UserServlet------else---null->"); request.getRequestDispatcher("listener2/login.jsp").forward( request, response); } } else if ("listener".equals(method)) { String uname = request.getParameter("uname"); // 判断：注意第二个equals判断是否加了！ if (uname != null && !uname.equals("")) { User user = new User(); user.setUname(uname); request.getSession().setAttribute("user", user); // 加listener 是因为我把success放在listener目录下： response.sendRedirect("listener/success.jsp"); } else { // 返回页面提示信息 request.setAttribute("mess", "用户名不能为空"); System.out.println("UserServlet------else---->"); request.getRequestDispatcher("listener/login.jsp").forward( request, response); } } else if ("login".equals(method)) { System.out.println("login--------------->" + method); String uname = request.getParameter("uname"); String upass = request.getParameter("upass"); User user = new User(); user.setUname(uname); user.setUpass(upass); // 1.把数据保存在User里 // 然后到后台去查询 UserService service = new UserServiceImpl(); User users = service.getUserByUnameAndUpass(user); System.out.println("doPost---------->" + users); if (users != null && !users.equals("")) { // 把users保存在Session作用域里 request.getSession().setAttribute("user", users); System.out .println("UserServlet------users != null&&users.equals(')---->" + users.getUname() + users.getUpass()); response.sendRedirect("success.jsp"); } else { // 返回页面提示信息 request.setAttribute("mess", "用户名或密码有误"); System.out.println("UserServlet------else---->"); request.getRequestDispatcher("login.jsp").forward(request, response); } System.out.println("doPost----end--UserServlet-->"); } else { // 解析upload.jsp页面 // 判断是否是这个类型:multipart/form-data post // 核心上传组件是哪几个对象 // 明确:核心　FileItemFactory　ServletFileUpload　FileItem对象 // 提交图片或文件　表单元素　判断一下　 // 路径也要考虑 // 页面元素和图片(文件)名获取的方式不同 // FileItem对象取想要的元素: // 页面元素　(类似于获取这样的getParameter元素);　保存在User对象 // 上传的文件和图片　文件名和图片名拿到,保存在User对象里 // 最后:　service.add(User); // 具体如下: // 声明或初始化 User user = new User(); String uploadfilepath = null; String uploadfileName = null; // 　images uploadfilepath = request.getSession().getServletContext() .getRealPath("images/"); System.out.println(uploadfilepath); File uploadnewname = new File(uploadfilepath); // 不存在这个目录,就自动创建一个新的 if (!uploadnewname.exists()) { uploadnewname.mkdir(); } // 判断是否是multipart/form-data post boolean isMultipart = ServletFileUpload.isMultipartContent(request); if (isMultipart) {// 是multipart/form-data post类型 // 上传的核心组件 FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); // 解析 List<FileItem> fileitem = null; try { fileitem = upload.parseRequest(request); } catch (FileUploadException e) { // TODO Auto-generated catch block e.printStackTrace(); } // 迭代器遍历 Iterator<FileItem> items = fileitem.iterator(); while (items.hasNext()) { FileItem item = items.next(); // 表单元素 if (item.isFormField()) { String name = item.getFieldName(); // 获取实体类中的相同元素后,把元素放在User对象中 if ("uname".equals(name)) { user.setUname(item.getString("UTF-8")); } else if ("upass".equals(name)) { user.setUpass(item.getString("UTF-8")); } else if ("uremark".equals(name)) { user.setUremark(item.getString("UTF-8")); } System.out.println(user); } else { // 获取上传图片名或文件名 uploadfileName = item.getName(); File file = new File(uploadfileName); user.setUfile(file.getName()); // 设置保存的路径 File filepath = new File(uploadfilepath, file.getName()); // 写入路径 try { item.write(filepath); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } System.out.println("上传文件的路径:　" + filepath); } } } else {// 不是multipart/form-data post的情况 // PrintWriter out = response.getWriter(); out.println("系统出现问题!"); out.close(); } // 调用javabean UserService service = new UserServiceImpl(); service.save(user); } }

jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>测试ajax 系统学习,欢迎垂询! QQ:1050968899 微信:QingYunJiao</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <!-- 设置h2的样式 --> <style> h2,h6 { color: red; } #div2 { display: none; } </style> <!-- 引入相关的js --> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript" src="js/login.js"></script> <!-- 引入相关的js --end--> </head> <!--主体内容--start--> <body> <!-- 返回时,隐藏显示的div --> <div align="center" id="div1"> <form action=""> <table> <caption> <h2>用户验证信息</h2> <!-- <h6>友情提示:文本框输入字符后(或没有输入),鼠标都需在文本框外点击一下,千万不要用回车键</h6> --> </caption> <input type="hidden" name="method" value="ajaxjson" id="method" /> <tr> <th>用户名：</th> <td><input name="uname" id="uname" /><span></span> </td> </tr> <tr> <th>密码：</th> <td><input name="upass" id="upass" type="password" /><span></span> </td> </tr> <tr> <th colspan="2"><input id="submit" type="button" value="登录" /> </th> </tr> </table> </form> </div> <!-- 返回时,显示隐藏的div --> <div id="div2" align="center"> <!-- table start --> <table border="1"> <caption> <h2>用户信息</h2> </caption> <tr> <th>ID</th> <th>姓名</th> <th>密码</th> </tr> </table> <!-- table end --> </div> </body> <!--主体内容--end--> </html>