6.PHP与JQuery load() $.get() $.getJSON()

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

["薯片","泡面","面包","辣条","***"]

效果图:

相关文章