记账本开发记录——第二十二天（2020.2.9）

今天主要学习了ajax的相关知识 ajax即异步处理数据 ajax是js自带的引擎 通过ajax可以异步处理 所谓异步 可以比作多人 比如你在敲代码 委托别人去帮你挂号 在他挂号的期间你还是可以敲代码 现有事件不会受到影响 这就叫做异步处理 今天主要是学习了异步处理在js和jq中的操作 以及json这种java原生格式 通过json可以很好的存储很多数据 json一般都是键值对形式的 分为：1）对象格式：{"key1":obj,"key2":obj,"key3":obj...}      2）数组/集合格式：[obj,obj,obj...]   同时这两种格式又可以互相嵌套 使得json对于存储数据很方便。

在学习玩相关知识后 使用ajax做了一个实时检验用户名是否存在的demo:

jquery代码:

        //为输入框绑定事件
        $(function(){
            $("#username").blur(function(){
                //1.失去焦点获得输入框的内容
                var usernameInput = $(this).val();
                //2.去服务端校验该用户名是否存在---ajax
                $.post(
                    "${pageContext.request.contextPath}/checkUsername",
                    {"username":usernameInput},
                    function(data){
                        var isExist = data.isExist;
                        //3.根据返回的isExist动态的显示信息
                        var usernameInfo = "";
                        if(isExist){
                            //该用户存在
                            usernameInfo= "该用户名已经存在";
                            $("#usernameInfo").css("color","red");
                        }else{
                            usernameInfo= "该用户名可以使用";
                            $("#usernameInfo").css("color","green");
                        }
                        $("#usernameInfo").html(usernameInfo);
                    },
                    "json"
                );
            });
        });

可以看到 整体操作也不是过于繁琐 也十分简单 关于后台代码 就不再展示了

之后 又做了一个利用ajax实现全站搜索（即购物网站里那种输入某个字段后自动模糊查询然后匹配到菜单中）的demo

前台：

<!-- 完成异步搜索的功能 -->
                <script>
                    function overFn(obj){
                        $(obj).css("background","#DBEAF9");
                    }
                    function outFn(obj){
                        $(obj).css("background","#fff");
                    }
                    function clickFn(obj){
                        $("#search").val($(obj).html());
                        $("#showDiv").css("display","none");
                        
                    }
                    function searchWord(obj){
                        //1.获得输入框输入的内容
                        var word = $(obj).val();
                        //2.根据输入框的内容去数据库中模糊查询---List<Porduct>
                        var content ="";
                        $.post(
                                "${pageContext.request.contextPath}/searchWord",
                                {"word":word},
                                function(data){
                                    //3.将返回的商品的名称 显示在showDiv中

                                    if(data.length>0){
                                        for(var i =0;i<data.length;i++){
                                            content+="<div style='padding:5px; cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>"
                                        }
                                        $("#showDiv").html(content);
                                        $("#showDiv").css("display","block");
                                    }
                                },
                                "json"
                        );
                        
                        
                        
                    }
                

这里主要是事件的绑定和后台读取 在读取中需要用到json字符串的转换 因为json字符串的一些固有限制 拼接字符串过于困难 有一些简单的工具可以使用：jsonlib Gson fastjson等等工具API 通过这些API可以简单的将对象转换为json格式：

//使用json的转换工具将对象或集合转成json格式的字符串
        /*JSONArray fromObject = JSONArray.fromObject(productList);
        String string = fromObject .toString();
        System.out.println(string);*/
        
        Gson gson = new Gson();
        String json = gson.toJson(productList);
        
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(json);

这里主要贴一下相关的代码 其他的不再贴了

至此java web的基础学习告一段落 明天开始关于安卓APP的开发学习

关于自己做的记账本 已经放到github上去了:

https://github.com/wushenjiang/CountNote

需要的可以用github的客户端自行查看