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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/atgfg/article/details/99962212

本博客地址 | 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>

网上演示:

 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

下载地址:

https://download.csdn.net/download/atgfg/11588559             

                                                            ——————— 精 选 文 章 ———————

  1. Java入门-Java学习路线课程第一课:初识JAVA
  2. Java入门-Java学习路线课程第二课:变量与数据类型
  3. Java入门-Java学习路线课程第三课:选择结构
  4. Java入门-Java学习路线课程第四课:循环结构
  5. Java入门-Java学习路线课程第五课:一维数组
  6. Java入门-Java学习路线课程第六课:二维数组
  7. Java入门-Java学习路线课程第七课:类和对象
  8. Java入门-Java学习路线课程第八课:方法和方法重载
  9. Spring框架-Java学习路线课程第一课:Spring核心
  10. Spring框架-Java学习路线课程:Spring的扩展配置
  11. idea Springboot启动时内嵌tomcat报错- An incompatible version [1.1.33] of the APR based Apache Tomcat Native
  12. Java学习技巧--董老师有话要说
  13. 一个简单的SSM框架Demo(登录(包含拦截器)和注销)

    更多免费资源请关注微信公众号:
     

    微信公众号

对域名或建站感兴趣的朋友可以点击下面的链接,有优惠噢!谢谢您的支持!

阿里云优惠点击: 最高¥2000云产品通用代金券

猜你喜欢

转载自blog.csdn.net/atgfg/article/details/99962212