以下代码演示了$.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的使用,可以从服务器端获取指定的相关信息,还可以添加回调函数,使页面本身元素的属性发生变化,例如将原来图片的直角变为了圆角。