現在來講，AJAX在如今是熱得不能再熱的技術。沒有人可否認，它擁有大批的支持者。在CNN上，...

時間  2019-11-08
標籤 現在 來講 ajax 如今 熱得 不能 再熱 技術 沒有 可否認 擁有 大批 支持者 cnn 欄目 Ajax 简体版
原文   原文鏈接

JavaScript技能的不足導致很長一段時間對於前端交互處理望而卻步，看着編程語言TOP排行榜JavaScript的熱度，加上好多網站的用戶體驗愈來愈如心，這些都離不開JavaScript。 html

說白了，開發人員之因此多年冷落JavaScript，終究是沒能駕馭了JavaScript。可是，逃避總不是辦法，開發出交互不好勁的網站，後臺處理在牛逼，也無法吸引用戶。隨着互聯網和Web2.0的發展，網上衝浪不再是簡單的獲取資訊，信息，更多融入了我的情感，自媒體，社區化，羣體的元素，而這些元素的融入天然少不了更加人性化的交互服務。 前端


說了這些，多源自愈來愈多很好體現效果的網站的誕生。 java


言歸正傳，下面的例子是一個簡單的數據操做，徹底是經過Ajax完成。 jquery

1.數據庫表結構： ajax

161635128.png

2.實體類：Account(參見數據庫表結構) 數據庫

3.數據源獲取類（JDBC） 編程

4.數據庫操做CRUD json

5.處理Ajax的請求的服務類ActionServlet app

jQuery提供的Ajax函數以下： 編程語言

162119760.png

$.ajax(options)是jQuery中Ajax的最底層實現，下面這個例子採用此方法完成。

  • 測試頁面

    162339804.png

  • 代碼：

    頁面代碼：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
        
            
                
                    姓名：
                        
                    心情：
                        
                    
                        
                    
                
                
                    
                    
                        編號：
                        
                    
                        
                    
                        
                
                
                    
                    
                    
                    
                
                
            
        
        
            網址：
            
            
        
        
            
            
    請稍等，數據正在加載...
            
        

    說明：使用Ajax來處理，移除表單標籤，提交按鈕等元素。

  • Ajax處理：

    實現添加信息，查詢全部信息，刪除指定編號信息，更新指定編號信息，查詢指定編號信息。

  • 代碼：


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    $(document).ready(function() {
            $("#divs").hide();
            $("#urlcontent").hide();
            $("#loadMsg").hide();
        })
        function show() {
            $.ajax({
                        global:true,
                        type : 'post',
                        url : "control",
                        data : {
                            method : 'show',
                        },
                        success : function(data) {
                            var divNode = $("#divs");
                            divNode.html("");
                            if (data != "null") {
                                var o = eval("(" + data + ")");
                                var title = $("
    ");
                                title
                                        .html("|編號|姓名|心情|發佈時間|");
                                title.appendTo(divNode);
                                $.each(o, function(i, n) {
                                    var div = $("
    ");
                                    var span = "|"
                                    $.each(n, function(pro, val) {
                                        span = span + "" + val + "|";
                                    })
                                    div.html(span).appendTo(divNode);
                                })
                                divNode.show();
                            } else {
                                $("#msg").html("沒有數據信息");
                            }
                        }
                    });
        }
        function add() {
            $("#divs").hide();
            var a_name = $("#a_name").val();
            var a_feeling = $("#a_feeling").val();
            if (a_name == "" || a_feeling == "") {
                alert("輸入信息不能爲空！");
                return;
            }
            $.ajax({
                type : 'post',
                url : "control",
                data : {
                    method : 'add',
                    a_name : a_name,
                    a_feeling : a_feeling
                },
                success : function(data) {
                    $("#msg").html(data);
                    $("#v_a_name").html(a_name);
                    $("#v_a_feeling").html(a_feeling);
                }
            });
        }
        function update() {
            $("#divs").hide();
            var a_id = $("#a_id").val();
            var a_name = $("#a_name").val();
            var a_feeling = $("#a_feeling").val();
            if (a_id == "" && a_name == "" && a_feeling == "") {
                alert("輸入編號或者信息不能爲空！");
                return;
            }
            $.ajax({
                type : 'post',
                url : "control",
                data : {
                    method : 'update',
                    a_name : a_name,
                    a_feeling : a_feeling,
                    a_id : a_id
                },
                success : function(data) {
                    $("#msg").html(data);
                    $("#v_a_id").html(a_id);
                    $("#v_a_name").html(a_name);
                    $("#v_a_feeling").html(a_feeling);
                }
            });
        }
        function del() {
            $("#divs").hide();
            var a_id = $("#a_id").val();
            if (a_id == "") {
                alert("輸入編號不能爲空！");
                return;
            }
            $.ajax({
                type : 'post',
                url : "control",
                data : {
                    method : 'delete',
                    a_id : a_id
                },
                success : function(data) {
                    $("#msg").html(data);
                }
            });
        }
        function query() {
            var a_id = $("#a_id").val();
            if (a_id == "") {
                alert("輸入編號不能爲空！");
                return;
            }
            $.ajax({
                        type : 'post',
                        url : "control",
                        data : {
                            method : 'query',
                            a_id : a_id
                        },
                        success : function(data) {
                            var divNode = $("#divs");
                            divNode.html("");
                            if (data != "null") {
                                var o = eval("(" + data + ")");
                                var title = $("
    ");
                                title
                                        .html("|編號|姓名|心情|發佈時間|");
                                title.appendTo(divNode);
                                $.each(o, function(i, n) {
                                    var div = $("
    ");
                                    var span = "|";
                                    $.each(n, function(pro, val) {
                                        span = span + "" + val + "|";
                                    })
                                    div.html(span).appendTo(divNode);
                                })
                                divNode.show();
                            } else {
                                $("#msg").html("沒有數據信息");
                            }
                        }
                    });
        }

    說明:Ajax提交的URL是對應的處理業務的Servlet程。

  • Servlet程序代碼：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    package com.ajax.test;
    import java.io.IOException;
    import java.util.Calendar;
    import java.util.Date;
    import java.util.List;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    @WebServlet("/ActionServlet")
    public class ActionServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
        private DAO dao = new DAO();
        private Account account;
        public ActionServlet() {
            super();
        }
        protected void doGet(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            doPost(request, response);
        }
        protected void doPost(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            response.setCharacterEncoding("UTF-8");
            String method = request.getParameter("method");
            if (method.equals("add")) {
                String a_name = request.getParameter("a_name");
                String a_feeling = request.getParameter("a_feeling");
                Date a_time = Calendar.getInstance().getTime();
                account = new Account();
                account.setA_name(a_name);
                account.setA_feeling(a_feeling);
                account.setA_time(a_time);
                int result = dao.add(account);
                if (result == 1) {
                    response.getWriter().print(a_time + " " + a_name + " 發佈信息成功！");
                } else {
                    response.getWriter().print(a_time + " " + a_name + " 發佈信息失敗！");
                }
            }
            if (method.equals("delete")) {
                int a_id = Integer.parseInt(request.getParameter("a_id"));
                account = new Account();
                account.setA_id(a_id);
                int result = dao.delete(account);
                if (result == 1) {
                    response.getWriter().print("刪除信息成功！");
                } else {
                    response.getWriter().print("刪除信息失敗！");
                }
            }
            if (method.equals("update")) {
                int a_id = Integer.parseInt(request.getParameter("a_id"));
                String a_name = request.getParameter("a_name");
                String a_feeling = request.getParameter("a_feeling");
                Date a_time = Calendar.getInstance().getTime();
                account = new Account();
                account.setA_id(a_id);
                account.setA_name(a_name);
                account.setA_feeling(a_feeling);
                account.setA_time(a_time);
                int result = dao.update(account);
                if (result == 1) {
                    response.getWriter().print(a_time + " " + a_name + " 更新信息成功！");
                } else {
                    response.getWriter().print(a_time + " " + a_name + " 更新信息失敗！");
                }
            }
            if (method.equals("query")) {
                int a_id = Integer.parseInt(request.getParameter("a_id"));
                Account account = dao.queryById(a_id);
                if (account != null) {
                    String json = objctToJson(account);
                    StringBuilder sb=new StringBuilder();
                    sb.append("{'1':");
                    sb.append(json);
                    sb.append("}");
                    response.getWriter().print(sb.toString());
                } else {
                    response.getWriter().print("null");
                }
            }
            if (method.equals("show")) {
                ListaccountList = dao.query();
                StringBuilder sb = new StringBuilder();
                sb.append("{");
                for (int i = 0, j = accountList.size(); i < j; i++) {
                    Account account = accountList.get(i);
                    sb.append(i);
                    sb.append(":");
                    sb.append(objctToJson(account));
                    if (i != j - 1) {
                        sb.append(",");
                    }
                }
                sb.append("}");
                response.getWriter().print(sb.toString());
            }
        }
        /**
         * 將對象信息轉換爲JSON格式的數據
         * @param account
         * @return
         */
        private String objctToJson(Account account) {
            StringBuilder sb = new StringBuilder();
            sb.append("{");
            sb.append("'a_id':'" + account.getA_id() + "',");
            sb.append("'a_name':'" + account.getA_name() + "',");
            sb.append("'a_feeling':'" + account.getA_feeling() + "',");
            sb.append("'a_time':'" + account.getA_time() + "'");
            sb.append("}");
            return sb.toString();
        }
    }


  • 下面是測試的效果圖：

    163908535.png

    163909105.png

    至此：jQuery的Ajax底層實現操做實現了無刷新的數據庫CRUD操做，整個過程在一個HTML頁面中完成。

  • jQuery提供的$.get(),$.post()，load()方法是在$.ajax()的基礎上進行封裝，若是將$.ajax（）定爲第一層，那麼這些方法就是第二層，$.getScript()和$.getJSON()方法就是第三層。


因爲上面貼了寫代碼，寫的有些長了


您正在訪問的是 百搜技術!但願百搜技術能協助您解決問題。如需提問,請移步 百搜論壇(http://bbs.baisoujs.com)進行提問!
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程