从零开始写项目第三篇【在线聊天和个人收藏夹】

浅浅的花香味﹌ 2021-09-30 19:46 314阅读 0赞

# 在线聊天 #

在浏览网页的时候无意发现了弹幕这个玩意，于是我们简单去探究了一下弹幕其实是怎么产生的。

后来就接触到了“推送”这么一个概念，然后发现了goEasy这个服务商。

http://goeasy.io/cn/started

goEasy能够将我们的数据实时进行推送，使用起来也是很方便的。

使用了goEasy以后，我们就可以实现实时推送了。那么就剩下弹幕是怎么弄的了。后来又去找到了JS的组件：

http://yaseng.org/jquery.barrager.js/

这个组件可以帮我们很方便地生成弹幕…

实现效果：

![640?wx\_fmt=png][640_wx_fmt_png]

该功能主要是使用到了两个组件，现在的功能实现非常简单，后面有需要再补充进去吧。

# 个人收藏夹 #

由于经常用到的网址越来越多，经常需要找好一阵子才能找到我想要去的网站。即使浏览器有收藏夹这么一个功能…

![640?wx\_fmt=png][640_wx_fmt_png 1]

**还是需要去找找找找的**，因此我想自己建一个以关键搜索来跳转页面的功能。因为我的桌面版就是使用Rolan这么一个软件，**输入关键字，就可以帮我打开软件了，很方便。**

于是想起我学过Lucene这么一个全文搜索工具的，后来又发现了Elasticsearch是Lucene的子代，功能更强大也是一种比较新的技术了。后来我就去花了几天去学习Elasticsearch，找到了不少的资料。

学习Elasticsearch的过程已经在相关的博文中写过了，这里就不一一赘述了。

值得注意一点的是：当创建Elasticsearch的Client的时候，一定要**加入嗅探这么一个配置**：

.put("client.transport.sniff", true)true)

否则Elasticsearch在使用的时候会非常非常卡，简直令人怀疑人生。

## 自动补齐 ##

经常上baidu、google的时候，当我们输入部分关键字的时候，那么会在下拉框中自动提示信息的。这个是怎么实现的呢？？？

Elasticsearch有suggest这么一个自动提示的功能，参考博文：

http://blog.csdn.net/gumpeng/article/details/50346631

http://www.tcao.net/article/86.html

http://blog.csdn.net/liyantianmin/article/details/60778273

具体的操作：

//自动补全属性--------    .startObject("suggestName")    .field("type", "completion")    .field("analyzer", "standard")    .field("payloads", "true")    .endObject()    //自动补全属性结束--------
        .startObject("suggestName")
        .field("type", "completion")
        .field("analyzer", "standard")
        .field("payloads", "true")
        .endObject()
        //自动补全属性结束--------

当用户加入新的索引记录的时候，自动补齐字段就是我们的关键字段

public static String String2JSON(String... strings) throws IOException {        String suggestName = strings[2];        if (suggestName.length() > 0) {        }        XContentBuilder builder = jsonBuilder()                .startObject()                .field("userId", strings[0])                .field("webSiteAddr", strings[1])                .field("webSiteName", strings[2])                //自动补全字段                .field("suggestName", strings[2])                .endObject();        return builder.string();    }
    
            String suggestName = strings[2];
            if (suggestName.length() > 0) {
        
    
            }
            XContentBuilder builder = jsonBuilder()
                    .startObject()
                    .field("userId", strings[0])
                    .field("webSiteAddr", strings[1])
                    .field("webSiteName", strings[2])
                    //自动补全字段
                    .field("suggestName", strings[2])
                    .endObject();
    
            return builder.string();
        }

那么在查询的时候就非常好办了，**首先查询Elasticserach所有的记录，再与提示字段来进行匹配，查询出来的数据就可以与关键字段相关了。**

/**     * 根据“命名”查询出数据（自动补全）     *     * @param client     * @param indexName     * @param condition 查询条件     */    public static List<String> queryIndexByConditionCompletion(TransportClient client, String indexName, String condition) {        String field = "suggestName";        //先查询所有结果再与提示字段的数据进行匹配        SearchRequestBuilder req = client.prepareSearch(indexName);        req.setQuery(QueryBuilders.matchAllQuery());        CompletionSuggestionBuilder csfb = new CompletionSuggestionBuilder(field).field(field).text(condition).size(100);        req.addSuggestion(csfb);        SearchResponse suggestResponse = req.execute().actionGet();        //遍历返回的结果、装载到集合中        List<String> lists = new ArrayList<String>();        List<? extends Suggest.Suggestion.Entry<? extends Suggest.Suggestion.Entry.Option>> results = suggestResponse.getSuggest().getSuggestion(field).getEntries();        for (Suggest.Suggestion.Entry<? extends Suggest.Suggestion.Entry.Option> op : results) {            List<? extends Suggest.Suggestion.Entry.Option> options = op.getOptions();            for (Suggest.Suggestion.Entry.Option pp : options) {                lists.add(pp.getText().toString());            }        }        return lists;    }
        public static List<String> queryIndexByConditionCompletion(TransportClient client, String indexName, String condition) {
        
    
    
            String field = "suggestName";
    
            //先查询所有结果再与提示字段的数据进行匹配
            SearchRequestBuilder req = client.prepareSearch(indexName);
            req.setQuery(QueryBuilders.matchAllQuery());
            CompletionSuggestionBuilder csfb = new CompletionSuggestionBuilder(field).field(field).text(condition).size(100);
            req.addSuggestion(csfb);
            SearchResponse suggestResponse = req.execute().actionGet();
    
    
            //遍历返回的结果、装载到集合中
            List<String> lists = new ArrayList<String>();
            List<? extends Suggest.Suggestion.Entry<? extends Suggest.Suggestion.Entry.Option>> results = suggestResponse.getSuggest().getSuggestion(field).getEntries();
            for (Suggest.Suggestion.Entry<? extends Suggest.Suggestion.Entry.Option> op : results) {
        
    
                List<? extends Suggest.Suggestion.Entry.Option> options = op.getOptions();
                for (Suggest.Suggestion.Entry.Option pp : options) {
        
    
                    lists.add(pp.getText().toString());
    
                }
            }
            return lists;
        }

对于下**拉框提示的是通过JS+CSS来进行展示出来的，我是参考了一篇博文，对其进行修改的：**

那篇博文现在找不着了…我就贴出我的代码吧：

<script type="text/javascript">        $(function () {            //实现搜索输入框的输入提示js类            function oSearchSuggest(searchFuc) {                var input = $('#condition');                var suggestWrap = $('#gov_search_suggest');                var key = "";                var init = function () {                    input.bind('keyup', sendKeyWord);                    input.bind('blur', function () {                        setTimeout(hideSuggest, 100);                    })                }                var hideSuggest = function () {                    suggestWrap.hide();                }                //发送请求，根据关键字到后台查询                var sendKeyWord = function (event) {                    //键盘选择下拉项                    if (suggestWrap.css('display') == 'block' && event.keyCode == 38 || event.keyCode == 40) {                        var current = suggestWrap.find('li.hover');                        if (event.keyCode == 38) {                            if (current.length > 0) {                                var prevLi = current.removeClass('hover').prev();                                if (prevLi.length > 0) {                                    prevLi.addClass('hover');                                    input.val(prevLi.html());                                }                            } else {                                var last = suggestWrap.find('li:last');                                last.addClass('hover');                                input.val(last.html());                            }                        } else if (event.keyCode == 40) {                            if (current.length > 0) {                                var nextLi = current.removeClass('hover').next();                                if (nextLi.length > 0) {                                    nextLi.addClass('hover');                                    input.val(nextLi.html());                                }                            } else {                                var first = suggestWrap.find('li:first');                                first.addClass('hover');                                input.val(first.html());                            }                        }                        //输入字符                    } else {                        var valText = $.trim(input.val());                        if (valText == '' || valText == key) {                            return;                        }                        searchFuc(valText);                        key = valText;                    }                }                //请求返回后，执行数据展示                this.dataDisplay = function (data) {                    if (data.length <= 0) {                        suggestWrap.hide();                        return;                    }                    //往搜索框下拉建议显示栏中添加条目并显示                    var li;                    var tmpFrag = document.createDocumentFragment();                    suggestWrap.find('ul').html('');                    for (var i = 0; i < data.length; i++) {                        li = document.createElement('LI');                        li.innerHTML = data[i];                        tmpFrag.appendChild(li);                    }                    suggestWrap.find('ul').append(tmpFrag);                    suggestWrap.show();                    //为下拉选项绑定鼠标事件                    suggestWrap.find('li').hover(function () {                        suggestWrap.find('li').removeClass('hover');                        $(this).addClass('hover');                    }, function () {                        $(this).removeClass('hover');                    }).bind('click', function () {                        input.val(this.innerHTML);                        suggestWrap.hide();                    });                }                init();            }            //实例化输入提示的JS,参数为进行查询操作时要调用的函数名            var searchSuggest = new oSearchSuggest(sendKeyWordToBack);            //这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求            //参数为一个字符串，是搜索输入框中当前的内容                        function sendKeyWordToBack(keyword) {                var obj = {                    "condition": $("#condition").val()                };                $.ajax({                    type: "POST",                    url: path + "/favorites/querySiteCompletion.do",                    data: obj,                    dataType: "json",                    success: function (data) {                        console.log(data);                        var aData = [];                        for (var i = 0; i < data.length; i++) {                            //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回                            if (data[i] != "") {                                aData.push(data[i]);                            }                        }                        //将返回的数据传递给实现搜索输入框的输入提示js类                        searchSuggest.dataDisplay(aData);                    }                });            }        });    </script><script type="text/javascript">        $(function () {            //实现搜索输入框的输入提示js类            function oSearchSuggest(searchFuc) {                var input = $('#condition');                var suggestWrap = $('#gov_search_suggest');                var key = "";                var init = function () {                    input.bind('keyup', sendKeyWord);                    input.bind('blur', function () {                        setTimeout(hideSuggest, 100);                    })                }                var hideSuggest = function () {                    suggestWrap.hide();                }                //发送请求，根据关键字到后台查询                var sendKeyWord = function (event) {                    //键盘选择下拉项                    if (suggestWrap.css('display') == 'block' && event.keyCode == 38 || event.keyCode == 40) {                        var current = suggestWrap.find('li.hover');                        if (event.keyCode == 38) {                            if (current.length > 0) {                                var prevLi = current.removeClass('hover').prev();                                if (prevLi.length > 0) {                                    prevLi.addClass('hover');                                    input.val(prevLi.html());                                }                            } else {                                var last = suggestWrap.find('li:last');                                last.addClass('hover');                                input.val(last.html());                            }                        } else if (event.keyCode == 40) {                            if (current.length > 0) {                                var nextLi = current.removeClass('hover').next();                                if (nextLi.length > 0) {                                    nextLi.addClass('hover');                                    input.val(nextLi.html());                                }                            } else {                                var first = suggestWrap.find('li:first');                                first.addClass('hover');                                input.val(first.html());                            }                        }                        //输入字符                    } else {                        var valText = $.trim(input.val());                        if (valText == '' || valText == key) {                            return;                        }                        searchFuc(valText);                        key = valText;                    }                }                //请求返回后，执行数据展示                this.dataDisplay = function (data) {                    if (data.length <= 0) {                        suggestWrap.hide();                        return;                    }                    //往搜索框下拉建议显示栏中添加条目并显示                    var li;                    var tmpFrag = document.createDocumentFragment();                    suggestWrap.find('ul').html('');                    for (var i = 0; i < data.length; i++) {                        li = document.createElement('LI');                        li.innerHTML = data[i];                        tmpFrag.appendChild(li);                    }                    suggestWrap.find('ul').append(tmpFrag);                    suggestWrap.show();                    //为下拉选项绑定鼠标事件                    suggestWrap.find('li').hover(function () {                        suggestWrap.find('li').removeClass('hover');                        $(this).addClass('hover');                    }, function () {                        $(this).removeClass('hover');                    }).bind('click', function () {                        input.val(this.innerHTML);                        suggestWrap.hide();                    });                }                init();            }            //实例化输入提示的JS,参数为进行查询操作时要调用的函数名            var searchSuggest = new oSearchSuggest(sendKeyWordToBack);            //这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求            //参数为一个字符串，是搜索输入框中当前的内容                        function sendKeyWordToBack(keyword) {                var obj = {                    "condition": $("#condition").val()                };                $.ajax({                    type: "POST",                    url: path + "/favorites/querySiteCompletion.do",                    data: obj,                    dataType: "json",                    success: function (data) {                        console.log(data);                        var aData = [];                        for (var i = 0; i < data.length; i++) {                            //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回                            if (data[i] != "") {                                aData.push(data[i]);                            }                        }                        //将返回的数据传递给实现搜索输入框的输入提示js类                        searchSuggest.dataDisplay(aData);                    }                });            }        });    </script>

HTML和CSS,我用得是Bootstrap的。

<div class="row " style="position: absolute; margin:0px auto;text-align:center; ">        <div class="col-lg-6 gover_search">            <div class="input-group gover_search_form clearfix">                <input class="form-control input-lg " type="text" placeholder="请输入您自定义的网站名..." id="condition">                <span class="input-group-btn">                    <button class="btn btn-primary btn-lg" type="button" id="search">搜索</button>                </span>                <div class="search_suggest" id="gov_search_suggest">                    <ul>                    </ul>                </div>            </div>        </div>    </div>
        <div class="row " style="position: absolute; margin:0px auto; text-align:center; ">
            <div class="col-lg-6 gover_search">
                <div class="input-group gover_search_form clearfix">
    
                    <input class="form-control input-lg " type="text" placeholder="请输入您自定义的网站名..." id="condition">
                    <span class="input-group-btn">
                        <button class="btn btn-primary btn-lg" type="button" id="search">搜索</button>
                    </span>
                    <div class="search_suggest" id="gov_search_suggest">
                        <ul>
    
                        </ul>
                    </div>
                </div>
            </div>
        </div>

<div class="row " style="position: absolute; margin:0px auto;text-align:center; ">        <div class="col-lg-6 gover_search">            <div class="input-group gover_search_form clearfix">                <input class="form-control input-lg " type="text" placeholder="请输入您自定义的网站名..." id="condition">                <span class="input-group-btn">                    <button class="btn btn-primary btn-lg" type="button" id="search">搜索</button>                </span>                <div class="search_suggest" id="gov_search_suggest">                    <ul>                    </ul>                </div>            </div>        </div>    </div>-->
        <div class="row " style="position: absolute; margin:0px auto;
    text-align:center; ">
            <div class="col-lg-6 gover_search">
                <div class="input-group gover_search_form clearfix">
    
                    <input class="form-control input-lg " type="text" placeholder="请输入您自定义的网站名..." id="condition">
                    <span class="input-group-btn">
                        <button class="btn btn-primary btn-lg" type="button" id="search">搜索</button>
                    </span>
                    <div class="search_suggest" id="gov_search_suggest">
                        <ul>
    
                        </ul>
                    </div>
                </div>
            </div>
        </div>

实现效果：

![640?wx\_fmt=png][640_wx_fmt_png 2]

## 增加网站 ##

在增加网站的时候，我们希望以单一的名字来进行添加，因为我们是通过命名来进行搜索对应的网站的。

所以在添加网站的时候需要先判断有没有该命名才能继续添加、如果存在命名了，就不让它添加了。

代码如下：

/**     * 插入数据进索引库中，在插入之前先判断该“命名”索引是否存在     *     * @param client     * @param indexName     * @param type     * @param json     * @param webSiteName     * @return     */    public static String insertIndexData(TransportClient client, String indexName, String type, String json, String webSiteName) {        //在插入之前、查看一下有没有该数据、如果有就不允许插入了【本站只允许命名是唯一的】        List<String> list = queryIndexByCondition(client, indexName, type, webSiteName);        if (list != null && list.size() > 0) {            return "hasWebSiteName";        } else {            client.prepareIndex(indexName, type).setSource(json).get();            return "success";        }    }
        public static String insertIndexData(TransportClient client, String indexName, String type, String json, String webSiteName) {
        
    
    
            //在插入之前、查看一下有没有该数据、如果有就不允许插入了【本站只允许命名是唯一的】
            List<String> list = queryIndexByCondition(client, indexName, type, webSiteName);
    
            if (list != null && list.size() > 0) {
        
                return "hasWebSiteName";
            } else {
        
                client.prepareIndex(indexName, type).setSource(json).get();
                return "success";
            }
    
    
        }

## 删除与查询网站 ##

添加完网站之后，我们可以**查询当前用户所有的网站，并可以删除**

查询用户所有的网站我还使用到了Elasticsearch的分页功能：

/**     * 根据用户id查询出索引记录、并对其进行分页     *     * @param client     * @param indexName     * @param type     * @param userId     * @param currentPage     * @return     */    public static Map<String, String> queryIndexById(TransportClient client, String indexName, String type, String userId, Integer currentPage) {        QueryBuilder query = QueryBuilders.matchQuery("userId", userId);        //接收返回的数据        Map<String, String> map = new HashMap();        //计算出开始取的页数        int startIndex = (currentPage - 1) * EsUtilsPro.PAGE_SIZE;        //查询出总记录数        Long totalRecordCount = ElasticsearchUtils.queryTotalCount(client, indexName, type, userId);        //查询出总页数        Long totalPageCount = totalRecordCount % EsUtilsPro.PAGE_SIZE == 0 ? totalRecordCount / EsUtilsPro.PAGE_SIZE : totalRecordCount / EsUtilsPro.PAGE_SIZE + 1;        SearchResponse response = client.prepareSearch(indexName).setTypes(type).setQuery(query).setFrom(startIndex).setSize(EsUtilsPro.PAGE_SIZE).execute()                .actionGet();        SearchHits hits = response.getHits();        //返回一个最高匹配那个对象就好了。        if (hits.totalHits() > 0) {            for (SearchHit hit : hits) {                map.put(hit.getId(), hit.getSourceAsString());            }        }        map.put("currentPage", String.valueOf(currentPage));        map.put("totalRecordCount", String.valueOf(totalRecordCount));        map.put("totalPageCount", String.valueOf(totalPageCount));        return map;    }
        public static Map<String, String> queryIndexById(TransportClient client, String indexName, String type, String userId, Integer currentPage) {
        
    
            QueryBuilder query = QueryBuilders.matchQuery("userId", userId);
    
            //接收返回的数据
            Map<String, String> map = new HashMap();
    
            //计算出开始取的页数
            int startIndex = (currentPage - 1) * EsUtilsPro.PAGE_SIZE;
    
            //查询出总记录数
            Long totalRecordCount = ElasticsearchUtils.queryTotalCount(client, indexName, type, userId);
    
            //查询出总页数
            Long totalPageCount = totalRecordCount % EsUtilsPro.PAGE_SIZE == 0 ? totalRecordCount / EsUtilsPro.PAGE_SIZE : totalRecordCount / EsUtilsPro.PAGE_SIZE + 1;
    
            SearchResponse response = client.prepareSearch(indexName).setTypes(type).setQuery(query).setFrom(startIndex).setSize(EsUtilsPro.PAGE_SIZE).execute()
                    .actionGet();
            SearchHits hits = response.getHits();
    
    
            //返回一个最高匹配那个对象就好了。
            if (hits.totalHits() > 0) {
        
                for (SearchHit hit : hits) {
        
                    map.put(hit.getId(), hit.getSourceAsString());
                }
            }
    
            map.put("currentPage", String.valueOf(currentPage));
            map.put("totalRecordCount", String.valueOf(totalRecordCount));
            map.put("totalPageCount", String.valueOf(totalPageCount));
    
            return map;
    
        }

查询总记录数

/**     * 根据用户id查询该用户拥有的总记录数     *     * @param client     * @param indexName     * @param type     * @param userId     * @return     */    public static Long queryTotalCount(TransportClient client, String indexName, String type, String userId) {        QueryBuilder query = QueryBuilders.matchQuery("userId", userId);        SearchResponse response = client.prepareSearch(indexName).setTypes(type).setQuery(query).execute().actionGet();        return response.getHits().totalHits();    }
        public static Long queryTotalCount(TransportClient client, String indexName, String type, String userId) {
        
    
            QueryBuilder query = QueryBuilders.matchQuery("userId", userId);
    
            SearchResponse response = client.prepareSearch(indexName).setTypes(type).setQuery(query).execute().actionGet();
    
    
            return response.getHits().totalHits();
    
        }

**使用Map集合的原因是因为我们要在查询的基础上实现删除的功能**，要想删除就必须知道当前记录的id,因此就使用到了Map集合了。

<script>        $(function () {            $("#queryById").click(function () {                var currentPage = $("#currentPage").val();                if (currentPage == null || currentPage == "") {                    currentPage = 1;                }                $.ajax({                    url: path + "/favorites/querySiteById.do",                    type: "post",                    data: {userId: $("#userId").val(), currentPage: currentPage},                    success: function (responseText) {                        //返回的是一个Map集合，我们遍历Map集合，                        for (var index in responseText) {                            //获取Map的value，index就代表Map的key                            var jsonObj = responseText[index]                            if (index.length > 16) {                                //获取JSON对象                                var data = eval("(" + jsonObj + ")");                                $("#manageSiteContent").before("<tr><td><input type='text' value=" + data.webSiteAddr + " ></input></td><td><input type='text' value=" + data.webSiteName + " ></input></td><td><a href='${request.contextPath}/favorites/deleteSiteById.do?indexId=" + index + "'>删除</a></td></tr>");                            } else {                                if (index == "currentPage") {                                    $("#currentPage").val(jsonObj);                                } else if (index == "totalPageCount") {                                    $("#totalPageCount").val(jsonObj);                                } else {                                    $("#totalRecordCount").val(jsonObj);                                }                            }                        }                        createPage($("#currentPage").val(), $("#totalPageCount").val(), $("#totalRecordCount").val());                    },                    error: function () {                        sweetAlert("系统错误了");                    }                });            });        });    </script><script>        $(function () {            $("#queryById").click(function () {                var currentPage = $("#currentPage").val();                if (currentPage == null || currentPage == "") {                    currentPage = 1;                }                $.ajax({                    url: path + "/favorites/querySiteById.do",                    type: "post",                    data: { userId: $("#userId").val(), currentPage: currentPage},                    success: function (responseText) {                        //返回的是一个Map集合，我们遍历Map集合，                        for (var index in responseText) {                            //获取Map的value，index就代表Map的key                            var jsonObj = responseText[index]                            if (index.length > 16) {                                //获取JSON对象                                var data = eval("(" + jsonObj + ")");                                $("#manageSiteContent").before("<tr><td><input type='text' value=" + data.webSiteAddr + " ></input></td><td><input type='text' value=" + data.webSiteName + " ></input></td><td><a href='${request.contextPath}/favorites/deleteSiteById.do?indexId=" + index + "'>删除</a></td></tr>");                            } else {                                if (index == "currentPage") {                                    $("#currentPage").val(jsonObj);                                } else if (index == "totalPageCount") {                                    $("#totalPageCount").val(jsonObj);                                } else {                                    $("#totalRecordCount").val(jsonObj);                                }                            }                        }                        createPage($("#currentPage").val(), $("#totalPageCount").val(), $("#totalRecordCount").val());                    },                    error: function () {                        sweetAlert("系统错误了");                    }                });            });        });    </script>

生成分页的样式、并指定当前页数（i就作为当前的页数）

<script>        function createPage(totalPageCount) {            for (var i = 1; i <= totalPageCount; i++) {                $(".pagination").append("<li><a href='#' onclick='queryPage(" + i + ")'>" + i + "</a></li>");            }        }    </script><script>        function createPage(totalPageCount) {            for (var i = 1; i <= totalPageCount; i++) {                $(".pagination").append("<li><a href='#' onclick='queryPage(" + i + ")'>" + i + "</a></li>");            }        }    </script>

异步查询分页数据、在查询之前先把原有的记录删除掉。

<script>        function queryPage(currentPage) {            //把原有的数据删除掉            $("#manageSiteTr").siblings().empty();            $.ajax({                url: path + "/favorites/querySiteById.do",                type: "post",                data: {userId: $("#userId").val(), currentPage: currentPage},                success: function (responseText) {                    //返回的是一个Map集合，我们遍历Map集合，                    for (var index in responseText) {                        //获取Map的value，index就代表Map的key                        var jsonObj = responseText[index]                        if (index.length > 16) {                            //获取JSON对象                            var data = eval("(" + jsonObj + ")");                            $("#manageSiteContent").before("<tr><td><input type='text' value=" + data.webSiteAddr + " ></input></td><td><input type='text' value=" + data.webSiteName + " ></input></td><td><a href='${request.contextPath}/favorites/deleteSiteById.do?indexId=" + index + "'>删除</a></td></tr>");                        } else {                            if (index == "currentPage") {                                $("#currentPage").val(jsonObj);                            } else if (index == "totalPageCount") {                                $("#totalPageCount").val(jsonObj);                            } else {                                $("#totalRecordCount").val(jsonObj);                            }                        }                    }                },                error: function () {                    sweetAlert("系统错误了");                }            });        }    </script><script>        function queryPage(currentPage) {            //把原有的数据删除掉            $("#manageSiteTr").siblings().empty();            $.ajax({                url: path + "/favorites/querySiteById.do",                type: "post",                data: { userId: $("#userId").val(), currentPage: currentPage},                success: function (responseText) {                    //返回的是一个Map集合，我们遍历Map集合，                    for (var index in responseText) {                        //获取Map的value，index就代表Map的key                        var jsonObj = responseText[index]                        if (index.length > 16) {                            //获取JSON对象                            var data = eval("(" + jsonObj + ")");                            $("#manageSiteContent").before("<tr><td><input type='text' value=" + data.webSiteAddr + " ></input></td><td><input type='text' value=" + data.webSiteName + " ></input></td><td><a href='${request.contextPath}/favorites/deleteSiteById.do?indexId=" + index + "'>删除</a></td></tr>");                        } else {                            if (index == "currentPage") {                                $("#currentPage").val(jsonObj);                            } else if (index == "totalPageCount") {                                $("#totalPageCount").val(jsonObj);                            } else {                                $("#totalRecordCount").val(jsonObj);                            }                        }                    }                },                error: function () {                    sweetAlert("系统错误了");                }            });        }    </script>

最终的效果如下：

![640?wx\_fmt=png][640_wx_fmt_png 3]![640?wx\_fmt=png][640_wx_fmt_png 4]

> 如果文章有错的地方欢迎指正，大家互相交流。习惯在微信看技术文章，想要获取更多的Java资源的同学，可以**关注微信公众号:Java3y**

[640_wx_fmt_png]: /images/20210827/030d5cd8bc014aacb3ac0e1d97a077c4.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/8858df1628b9407cb2c96c8850a4f134.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/f04b22226457426793cfb26955c91755.png?wx_fmt=png
[640_wx_fmt_png 3]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/2BGWl1qPxib0Lk4OL3BFXUDNfictPEfHhLSyTVtBXmUKWcyZFJMJxtD0oJJHs2BmRNRHjW6bHVZox0atibQKc5HWA/640?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210827/b324c302af664ca29e43480875b770ee.png?wx_fmt=png