java中Ajax实现数据的异步交互@2018-06-07

1、知识点
css：浮动、清除浮动
jQuery：选择器（选己排他）、链式调用
ajax

效果图：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 200px auto;
            width: 400px;
            height: 400px;
            background-color: gray;
        }

        .container ul li {
            list-style: none;
            line-height: 30px;
            float: left;
            border: 1px solid yellow;
            width: 78px;
        }

        .sel {
            background-color: #5CADFF;
        }

        .container .con {
            width: 400px;
            height: 300px;
        }

        .one {
            background-color: red;
        }

        .two {
            background-color: yellow;
        }

        .three {
            background-color: green;
        }

        .four {
            background-color: pink;
        }

        .five {
            background-color: blue;
        }

        /*开启haslayout*/
        .clearfix {
            *zoom: 1;
        }

        /*ie 6 7 不支持伪元素*/
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="nav clearfix">
        <ul>
            <!--<li class="sel" ajax="true" url="data1.html">111111</li>-->
            <li class="sel" ajax="true" url="data.html">111111</li>
            <li>222222</li>
            <li>333333</li>
            <li>444444</li>
            <li>555555</li>
        </ul>
    </div>
    <div class="con one"></div>
    <div class="con two"></div>
    <div class="con three"></div>
    <div class="con four"></div>
    <div class="con five"></div>
</div>


<script>
    $(function () {
        $(".nav").find("li").hover(function () {
            $(this).addClass("sel").siblings().removeClass()
            //获取当前元素索引
            var $index = $(this).index()
            $(".con").hide().eq($index).show()

            var $con = $(".con").eq($index)

            var $ajax = $(this).attr("ajax")
            var $url = $(this).attr("url")
            // alert($ajax+"==========="+$url)


            if ($ajax) {
                //确认是ajax请求

                //ajax填充内容区域
                $.ajax({
                    type: "post",
                    url: $url,
                    beforeSend: function () {
                        //url错误，获取不到资源数据的时候

                        $con.html("加载中...")

                    },
                    success: function (data) {
                        $con.html(data)
                    }
                })
            }

        })
    })

</script>
</body>
</html>

参考：
http://bijian1013.iteye.com/blog/2038254

https://www.jb51.net/article/26195.htm

https://my.oschina.net/zzop/blog/712263

java中Ajax实现数据的异步交互@2018-06-07

猜你喜欢