js动态添加数据，ajax使用，鼠标移入事件和点击事件等

一、ajax获取数据

1.将编辑html内容，在html的body添加下面内容

<div class="products-box clearfix">
            <div id="tabs-d" class="tabs-wrap">
                <ul class="tabs-menu" id="tabs-u">

                </ul>
            </div>

            <div class="tabs-content" id="tabs-con">
                <div class="tabs-info clearfix" id="tabs-inf">

                </div>
            </div>
        </div>

 2.编辑相对应的js，给ul和下面的div动态添加内容

/*初始化方法*/
$(document).ready(function () {

    page();
});

function page() {
    $.ajax({
            type: 'post',
            url: "/group/group/home/cate/list",
            dataType: "json",
            success: function (result) {
                if (result.status == '1') {//请求成功
                    $("#tabs-d #tabs-u").html('');
                    var _Html = '';
                    var dataList = result.List;
                    for (var i = 0; i <= 8 && i < dataList.length; i++) {
                        _Html += '<li onmouseout = "change(\'tabs-s\',\'none\',\'' + dataList[i].cateId + '\')" onmouseover="change(\'tabs-s\',\'block\',\'' + dataList[i].cateId + '\')">' + dataList[i].cateName + '<div id="tabs-s" class="tabs-subcate" style="display:none;>';
                        // _Html += func1(dataList.cateId);
                        _Html += '</div></li>';
                    }
                    _Html += '<li id="tabs-l" onclick="window.open(\'你的url\')" >';
                    _Html += "查看更多";
                    _Html += '</li>';
                    $("#tabs-d #tabs-u").html(_Html);
                }
            },

        }
    );
}

ajax参数说明：type：为请求方式，get和post等

                        url：请求的路径，根据自己控制器的路径

                        dataType:数据返回格式

                        data：传递的参数，一般写成键值对的形式（无参数可省略）

获取到控制器的数据result，然后判断数据时候存在，然后将数据转换成list形式，然后遍历添加在ul里面，$("#tabs-d #tabs-u")这是根据前面div和ul的id来操作的

3.在li标签上面添加一个鼠标移入移出事件，

_Html += '<li onmouseout = "change(\'tabs-s\',\'none\',\'' + dataList[i].cateId + '\')" onmouseover="change(\'tabs-s\',\'block\',\'' + dataList[i].cateId + '\')">' + dataList[i].cateName + '<div id="tabs-s" class="tabs-subcate" style="display:none;>';



function change(myid, mode, cateId) {
    document.getElementById(myid).style.display = mode;
    if (mode == 'block') {
        func1(cateId);
        //显示下拉菜单
        //设置下拉菜单所在的div边框
        document.getElementById(myid).style.border = "1px solid #eee";
        document.getElementById(myid).style.borderTop = "none";
        //设置鼠标划过的li的边框以及背景颜色
        document.getElementById(myid).parentNode.style.backgroundColor = "#fff";
        document.getElementById(myid).parentNode.style.border = "1px solid #eee";
        document.getElementById(myid).parentNode.style.borderBottom = "none";
    } else {
        //当不显示下拉列表的时候 鼠标划过的li的边框以及背景颜色
        document.getElementById(myid).parentNode.style.backgroundColor = "";
        document.getElementById(myid).parentNode.style.border = "";
    }

}

鼠标移入之后显示一个div,然后给该div动态添加数据，调用下面方法

func1(cateId);

function func1(cateId) {
    $.ajax({
        type: 'post',
        url: "/group/group/home/cate/gcgs",
        data: {"cateId": cateId},
        dataType: "json",
        success: function (result) {
            if (result.status == '0') {
                $("#tabs-s").html('');
                var _html = '';
                var dataList = result.groupCateList;
                _html += '<tr>'
                for (var i = 0; i <= 5 && i < dataList.length; i++) {
                    _html += '<a href="javascript:getProduct(\'' + dataList[i].cateId + '\')" class="ad">';
                    _html += '<td id="tabs-td" >' + dataList[i].cateName + '</td>';
                    _html += '</a>';
                }
                _html += '</tr>'
                $("#tabs-s").html(_html);

            }
        },
    });

}

给添加的数据添加点击事件，点击该数据，显示该数据下面的产品。

function getProduct(cateId) {
    $.ajax({
        type: 'post',
        url: "/group/group/home/cate/findProductList",
        data: {"cateId": cateId},
        dataType: "json",
        success: function (result) {
            if (result.status == "0") {
                //请求成功
                $("#tabs-con #tabs-inf").html('');
                var _html = '';
                var dataList = result.page.list;
                for (var i = 0; i < 9 && i < dataList.length; i++) {
                    _html += '<a href="javascript:window.open(\'你的url\')" class="info-item"><div class="title">';
                    _html += dataList.pName;
                    _html += '</div>';
                    _html += '<p class="txt">';
                    _html += dataList.pExplain;
                    _html += '</p>';
                    _html += '<button type="button" class="info-btn" >了解详情</button>';
                    _html += '</a>';
                }
            }
        },
    });
}