欢迎访问 licqi IT技术
我们一直在努力

一个例子探究jQuery的Ajax应用(一)

JavaScript技能的不足致使很长一段时间对于前端交互处理望而却步,看着编程语言TOP排行榜JavaScript的热度,加上好多网站的用户体验越来越如心,这些都离不开JavaScript。

说白了,开发人员之所以多年冷落JavaScript,终究是没能驾驭了JavaScript。但是,逃避总不是办法,开发出交互很差劲的网站,后台处理在牛逼,也没法吸引用户。随着互联网和Web2.0的发展,网上冲浪再也不是简单的获取资讯,信息,更多融入了个人情感,自媒体,社区化,群体的元素,而这些元素的融入自然少不了更加人性化的交互服务。

说了这些,多源自越来越多很好体现效果的网站的诞生。

言归正传,下面的例子是一个简单的数据操作,完全是通过Ajax完成。

1.数据库表结构:

2.实体类:Account(参见数据库表结构)

3.数据源获取类(JDBC)

4.数据库操作CRUD

5.处理Ajax的请求的服务类ActionServlet

jQuery提供的Ajax函数如下:

$.ajax(options)是jQuery中Ajax的最底层实现,下面这个例子采用此方法完成。

  • 测试页面

  • 代码:

    页面代码:

    <body>
        <center>
            <div>
                <div>
                    <label id="l_a_name">姓名:</label>
                        <input type="text" id="a_name" name="a_name" /><br />
                    <label id="l_a_feeling">心情:</label><br />
                        <textarea rows="10" cols="30" id="a_feeling" name="a_feeling"></textarea>
                    <div>
                        <label id="msg"></label>
                    </div>
                </div>
                <div>
                    <span>
                    <button id="show" name="show" value="show"                 <span><button id="add" name="add" value="add"                 <span>
                        <label id="l_a_id">编号:</label><input type="text" id="a_id" name="a_id" />
                        <button id="update" name="update" value="update"                 </span>
                    <span>
                        <button id="del" name="del" value="delete"                 </span>
                    <span>
                        <button id="query" name="query" value="query"                 </span>
                </div>
                <div>
                    <span id="v_a_id"></span>
                    <span id="v_a_name"></span>
                    <span id="v_a_feeling"></span>
                    <span id="v_a_time"></span>
                </div>
                <div id="divs" align="center"></div>
            </div>
        </center>
        <div>
            网址:<input type="text" id="url" name="url" />
            <input type="button" id="get" value="加载"  />
            <div id="urlcontent"></div>
        </div>
        <div>
            <input id="wether" type="button"  value="获取JSON数据" />
            <div id="loadMsg">请稍等,数据正在加载...</div>
            <div id="imageDiv"></div>
        </div>
    </body>

    说明:使用Ajax来处理,移除表单标签,提交按钮等元素。

  • Ajax处理:

    实现添加信息,查询所有信息,删除指定编号信息,更新指定编号信息,查询指定编号信息。

  • 代码:

    $(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 = $("<div>");
                                title
                                        .html("|<span>编号</span>|<span>姓名</span>|<span>心情</span>|<span>发布时间</span>|");
                                title.appendTo(divNode);
                                $.each(o, function(i, n) {
                                    var div = $("<div>");
                                    var span = "|"
                                    $.each(n, function(pro, val) {
                                        span = span + "<span>" + val + "</span>|";
                                    })
                                    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 = $("<div>");
                                title
                                        .html("|<span>编号</span>|<span>姓名</span>|<span>心情</span>|<span>发布时间</span>|");
                                title.appendTo(divNode);
                                $.each(o, function(i, n) {
                                    var div = $("<div>");
                                    var span = "|";
                                    $.each(n, function(pro, val) {
                                        span = span + "<span>" + val + "</span>|";
                                    })
                                    div.html(span).appendTo(divNode);
                                })
                                divNode.show();
                            } else {
                                $("#msg").html("没有数据信息");
                            }
                        }
                    });
        }

    说明:Ajax提交的URL是对应的处理业务的Servlet程。

  • Servlet程序代码:

    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")) {
                List<Account> accountList = 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();
        }
    }

  • 下面是测试的效果图:

    至此:jQuery的Ajax底层实现操作实现了无刷新的数据库CRUD操作,整个过程在一个HTML页面中完成。

  • jQuery提供的$.get(),$.post(),load()方法是在$.ajax()的基础上进行封装,如果将$.ajax()定为第一层,那么这些方法就是第二层,$.getScript()和$.getJSON()方法就是第三层。

由于上面贴了写代码,写的有些长了,关于第三层的例子参见第二篇:http://aiilive.blog.51cto.com/1925756/1304356

赞(0) 打赏
未经允许不得转载:licqi IT技术 » 一个例子探究jQuery的Ajax应用(一)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏