0522-ajax-$.load(),get - jquery - php中文网博客

首页 > 博客列表 > 0522-ajax-$.load(),get

博主信息

博文 61

粉丝 1

访问量 68120

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq-ajax</title>
</head>
<body>
<h3>江湖门派查询系统load()</h3>
<label for="school">请选择:</label>
<select name="school" id="school">
    <!-- 这里面的option呢?咱们用php来动态生成 -->
</select>
<p id="detail"></p>

<script src="static/js/jquery-3.4.1.js"></script>
<script>

 //$.load()方法
 //    var select=$('#school').load('inc/school.php');
 //
 //    select.on('change',getData);
 //    function getData() {
 //        $('#detail').load(
 //
 //            'inc/detail.php',    //第一个参数，URL
 //
 //            {key:$(this).val()}, //向服务器发送请求的数据样式，POST发送/GET不发送数据
 //
 //            function () {        //第三个参数，获取到服务器返回数据后的回调函数
 //                $('[value=""]').remove();
 //            }
 //        )
 //    }



 //$.get()方法
    $.get('inc/school.php',function (data,zhuangtai){
    console.log(data);
    console.log(zhuangtai);
    if (zhuangtai==='success'){
        // $(data).appendTo('select');
        $('#school').html(data);    // 另一种写法
    }
});

    $('#school').on('change',getData);
    function getData() {
        $.get(
            'inc/detail.php',

            {key:$(this).val()},

            function (data, zhuangtai) {  //GET必须有返回数值和返回状态，根据状态判断是否添加数值
               console.log(data);
                if (zhuangtai === 'success') {
                    //console.log(data);
                   // $(data).appendTo('#detail');  //apendTo()不覆盖以前的数据，只是追加
                    $('#detail').html(data);
                    $('[value=""]').remove();
                } else {  //出错,未拿到响应数据
                    $('#detail').html('<span style="color:red">请求错误</span>');
                }
            }
        )


    }

    
    
    

</script>



</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：未批改

老师批语：