jquery选修-ajax-get和load请求

<!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等操作;

相关文章