批改状态:未批改
老师批语:
以下代码演示了$.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的使用,可以从服务器端获取指定的相关信息,还可以添加回调函数,使页面本身元素的属性发生变化,例如将原来图片的直角变为了圆角。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号