一只java小白的一些开发日记_小白的开发日记-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37753413/article/details/77239688

本文介绍了一个基于Web的应用中实现集群管理的方法，包括集群的增加、查询及按名称检索等功能。详细讲解了如何通过Ajax实现前后端交互，以及如何在前端进行实时校验，确保数据的有效性和唯一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.增加集群

$("#addCluster").click(function(){
        var formData = new FormData();
        formData.append('clusterDescribe', document.getElementById("clusterDescribe1").value);
        formData.append('clusterName',document.getElementById("clusterName1").value)
        $.ajax({
            url : 'addCluster',
            type : 'POST',
            data : formData,
            async: false,
            success : function(data) { 

                console.info(data);
                result = $.parseJSON(data);
            }
        }); 
        window.parent.location.reload();


    });

使用同步的ajaxa sync: false也可用普通的js，data也可写成{‘clusterId’:变量a，’clusterName’:变量b}。success中的data是从后台传回来的数据，增加集群需要操作数据库但是需要插入集群ID,h2数据库不能自动增加ID，需要找到最大ID号判断

Integer maxId = clusterInfoDao.getMaxId();
        if(maxId ==null){
            cluster.setClusterId(1);
        }else{
            cluster.setClusterId(maxId+1);
        }

最后刷新父界面的列表树，展示新加的集群

增加集群时还要通过ajax判断是否重名

    $("input[name='clusterNameAdd']").keyup(function() {

        var name = this.value;

        $.ajax({
            url : 'checkClusterName',
            type : 'POST',
            data : {'newName':name},
            success : function(data) {
                //alert(data);
                if(data.length > 5)
                    $("p[name='tip']").text("该集群名已经存在！");
                    $("button[name='button']").attr("disabled",true);
                if(data.length < 5){
                    $("button[name='button']").attr("disabled",false);
                    $("p[name='tip']").text("");
                }
            }
        }); 
    });

添加keyUp事件，key指键盘的键当他弹起时即生效，给输入框旁添加一个p标签，使其展示错误信息，另外还要将button按钮设为不可用，使其不能进行下一步，attr（）改变一个标签的属性值。attr（属性，value）

2.查询所有集群

<tbody>
    <c:forEach var="list" items="${clusterList}">
        <tr>            
            <td style="display:none">${list.clusterId}</td>
            <td>${list.clusterName}</td>
            <td name="df">${list.clusterDescribe}</td>
        </tr>                       
    </c:forEach>
</tbody>

标签循环list ，得到list的值有很多不需要界面展示但是需要用到的，style标签将其隐藏

3.按集群名检索集群

    $("#queryCluster").keyup(function() {
        var text = this.value;
        $.ajax({
            url : 'getClustersByName',
            type : 'POST',
            data : {'clusterName':text},
            success : function(data) {
                var jsonData = eval(data); 

                $("tbody").empty();
                var str = "";
                for (var i = 0; i < jsonData.length; i++) {
                   var data = jsonData[i];

                   str+="<tr>";
                   str+="<td style='display:none'>"+data.clusterId+"</td>";
                   str+="<td>"+data.clusterName+"</td>";
                   str+="<td>"+data.clusterDescribe+</td>";
                   str+="</tr>";  
                }
                $("tbody").html(str);
            }
        });
    });

接收到后台传来的值，先清空tbody的值，然后循环获取data中的值，用str字符串拼接之前标签中的值，最后用.html （）方法写入网页
写入时其上的事件应用live（）修饰
关于JQERY html(),text(),val()的用法详见
(http://www.cnblogs.com/keyi/p/5809342.html)