三级联动菜单

原创2019-07-10 14:40:2210
摘要:<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Ajax中的$.get()</title></head><body><h3>江湖门派查询系统$.get(

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Ajax中的$.get()</title>

</head>

<body>

<h3>江湖门派查询系统$.get()</h3>

<label for="school">请选择:</label>

<select name="school" id="school"></select>

<p id="detail"></p>


<script src="../lib/jquery.js"></script>

<script>

    $.get('inc/school.php',function(data,status){

        if (status === 'success') {

            // $(data).appendTo('#school');

            $('#school').html(data);    // 另一种写法

        }

    });


    $('#school').change(function (event) {

        // console.log($(this).serialize());

        $.get(

            'inc/detail.php',   // 请求的url地址


            {key: $(event.target).val()},   // 请求参数,以对象字面量形式


            function (data,status){     // 请求成功的回调方法

                // console.log(status);    // success

                if (status === 'success') {

                    $('#detail').html(data);

                    $('[value=""]').remove();

                } else {    //出错,未拿到响应数据

                    $('#detail').html('<span style="color:red">请求错误</span>');

                }

            },

            'html'  // 响应数据的格式,html/json/xml可省,会自动判断

        );

    });

</script>

</body>

</html>


批改老师:欧阳克批改时间:2019-07-11 13:25:53
老师总结:完成的不错。三级联动的效果有多种,都要学一些。继续加油。

发布手记

热门词条