![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
以下代码演示了$.ajax()第一种用法.load()，.load()可以从服务器端通过POST和GET请求分别获取相应的信息，与大家分享一下
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.ajax-load()</title>
</head>
<body>
<img src="images/1.jpg" width="400">
<div></div>
<button>点击获取信息</button>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
$('div').eq(0)
// 加载服务器中info的信息
// post请求
// .load('api/info.php',{type:'游戏',nation:"日本"})
// get请求
.load('api/info.php','num=224&aut=高桥和希',function(){
$('img').css('border-radius','10%')
})
})
</script>点击 "运行实例" 按钮查看在线实例
PHP代码：
<h3>游戏王</h3>
<p>神卡：翼神龙、天空龙、巨神兵</p>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo isset($_POST['type'])?'类型: '.$_POST['type'].'<br>' :'';
echo isset($_POST['nation'])?'发行地: '.$_POST['nation'].'<br>' :'';
}
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
echo isset($_GET['num'])?'集数: '.$_GET['num'].'<br>' :'';
echo isset($_GET['aut'])?'作者: '.$_GET['aut'].'<br>' :'';
}
?>点击 "运行实例" 按钮查看在线实例
效果图：
总结：
本次主要学习了.load的使用，可以从服务器端获取指定的相关信息，还可以添加回调函数，使页面本身元素的属性发生变化，例如将原来图片的直角变为了圆角。
