使用jquery發送Ajax請求的幾種異步刷新方式

本博客地址 | 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. Java入門-Java學習路線擴展課程:equals的使用
  10. Java入門-Java學習路線課程面試篇:取商 / 和取餘(模) % 符號的使用
  11. Java進階-Java學習路線課程第一課:Java集合框架-ArrayList和LinkedList的使用
  12. Java進階-Java學習路線課程第二課:Java集合框架-HashSet的使用及去重原理
  13. Spring框架-Java學習路線課程第一課:Spring核心
  14. Spring框架-Java學習路線課程:Spring的擴展配置
  15. Springboot框架-Java學習路線課程:Springboot框架的搭建之maven的配置
  16. java學習:在給學生演示用Myeclipse10.7.1工具生成War時,意外報錯:SECURITY: INTEGRITY CHECK ERROR
  17. idea Springboot啓動時內嵌tomcat報錯- An incompatible version [1.1.33] of the APR based Apache Tomcat Native
  18. Java學習技巧--董老師有話要說
  19. 一個簡單的SSM框架Demo(登錄(包含攔截器)和註銷)

 

更多免費資源請關注微信公衆號:JavaForum

微信公衆號: JavaForum

對域名或建站感興趣的朋友可以點擊下面的鏈接,有優惠噢!謝謝您的支持!

 

阿里雲優惠點擊: 最高¥2000雲產品通用代金券

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章