实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例