![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
HTML load() 方法使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>load()方法</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>select零食选择load()</h3>
<label for="food">请选择:</label>
<select name="food" id="food"></select>
<div id="detail"></div>
</body>
</html>
<script>
// load()方法返回的$option变量会自动放入<select>元素下
$('#food').load('./option.php').change(function(event){
// console.log( $(event.target).val() ); // 改变的时候拿它的值
$('#detail').load('./detail.php', {key:$(event.target).val()}, function(){
$('[value=""]').remove();
});
});
</script>option.php
<?php
$food = ['薯片','泡面','面包','辣条','***']; // 创建一个数组
$option = '<option value="">请选择</option>'; // 构造一条option元素
foreach ($food as $key => $value) {
$option .="<option value='{$key}'>{$value}</option>";
}
echo $option;detail.php
<?php $detail = [ 0=>'<img src="images/01.jpg" width="200"><h3>薯片</h3>', 1=>'<img src="images/02.jpg" width="200"><h3>泡面</h3>', 2=>'<img src="images/03.jpg" width="200"><h3>面包</h3>', 3=>'<img src="images/04.jpg" width="200"><h3>辣条</h3>', 4=>'<img src="images/05.jpg" width="200"><h3>***</h3>', ]; // $_POST['key']; //返回键名 echo $detail[$_POST['key']];
HTML $.get()与$.getJSON()函数使用 (代码与上面的差不多)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery $.get()函数</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>select零食选择 $.get()</h3>
<label for="food">请选择:</label>
<select name="food" id="food"></select>
<div id="detail"></div>
</body>
</html>
<script>
// $.get()函数使用方式
$.get('./option.php', function(data,status,xhr){
console.log(data); // 查看获取到的数据
console.log(status); // 查看获取状态
console.log(xhr); // 查看对象
if(status === 'success'){
$('#food').html(data); // 把获取的值添加到元素下
// $(data).appendTo('#food');
}
});
// $.getJSON()函数使用方式
$.getJSON('./option.json', function(data,status){
if(status === 'success'){
// 默认的显示内容
let option = '<option value="">请选择</option>';
// console.log(data);
// 专用来遍历对象或数组的全局函数
$.each(data,function(k,v){
// console.log(data[k]); // 通过key获取
option += '<option value="'+k+'">'+data[k]+'</option>';
});
// console.log(option);
// 将拼装好的html代码添加到<select>元素下
$('#food').html(option);
}
});
$('#food').change(function(event){
console.log( $(this).serialize() );
$.get('./detail.php', {key:$(event.target).val()}, function(data, status){
if(status === 'success'){
$('#detail').html(data);
$('[value=""]').remove();
}else{
$('#detail').html('<span>请求失败</span>');
}
});
});
</script>option.json
["薯片","泡面","面包","辣条","***"]
效果图:
