Collection
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
<head>
<title>get请求和load请求</title>
<meta charset="utf-8">
</head>
<body>
<label>请选择:</label>
<select name="school" id="school"></select>
<p id="detail"></p>
</body>
<script type="text/javascript" src="../../jquery-3.3.1.min.js"></script>
<script >
//function里面的参数时后端返回的对象;
$.get('school.php',function(data){
// console.log(data);
if (status='success') {
$('#school').html(data);
}
});
$('#school').change(function(event){
$.get('detail.php',{key:$(event.target).val()},function(data){
if (status='success') {
$('#detail').html(data);
}
})
})
// // load就是在元素后面直接插入内容;比get省一步插入;
// $('#school').load('school.php')
// .change(function (event) {
// // target:指规定的元素;{key(键名):返回的对象.规定的元素}
// $('#detail').load('detail.php',{key:$(event.target).val()},function(){
// $('[value=""]').remove();
// })
// })
</script>
</html>//url=detail.php <?php $detail=[ 0=>'<h3>帮主:黄蓉</h3>', 1=>'<h3>帮主:小龙女</h3>', 2=>'<h3>帮主:周芷若</h3>' ]; echo $detail[$_POST['key']]; //是get请求就换成get传递; ?>
//url=school.php
<?php
$school=['丐帮','古墓派','峨眉派'];
$option = '<option value="">请选择</option>';
foreach ($school as $key => $value) {
$option.="<option value='{$key}'>{$value}</option>";
}
echo $option;
?>参数: url是指要导入文件的地址。
data：可选参数；因为load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。
load()方法:
这是jquery中最简单的ajax的请求方法,默认为get请求方式;
load(url,data,callback);load(请求地址,请求数据,请求成功后的回调函数);
url:请求服务器上的资源url地址,可以是一个txt,html,php...;
data:get请求:无参数或是名值对格式字符串;post请求:对象或数组;(load自动判断请求方式);
调用:该方法需要在jquery对象上调用,回调适用于jquery集合中每一个元素,如$('#box').load(...);
优势:自动参数自动判断请求类型是get还是post;可直接将load返回的值作为dom元素内容自动插入,省去了append等操作;
