恼脓修骆伍嘿淌伟鹃惫翰瑰舱
目录结构：
demo1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.ajax-load()</title>
</head>
<body>
<img src="../images/zly.jpg" width="150">
<div></div>
<button>查看基本信息</button>
</body>
</html>
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function()
{
//load()可以远程加载服务器上的文件
$("div:first").load('api/info.php')
})
</script>
点击前：
点击显示赵丽颖的信息：
只查看姓名：
demo1.html
js代码：
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function()
{
//load()可以远程加载服务器上的文件
//+" h3" h3前面必须要有空格
$("div:first").load('api/info.php'+" h3")//支持选择器
})
</script>
执行：
获取p标签的内容
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function()
{
//load()可以远程加载服务器上的文件
//+" h3" h3前面必须要用空格
$("div:first").load('api/info.php'+" p")//支持选择器
})
</script>
执行：
POST请求提交数据
demo1.html
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function()
{
$("div:first")
.load('api/info.php',{
birthday:'10月16日',
nation:"中国"
}) //POST
})
</script>
info.php
<h3>赵丽颖</h3>
<p>《楚乔传》、《花千骨》、《杉杉来了》</p>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo isset($_POST['birthday'])?'生日: '.$_POST['birthday'].'<br>' :'';
echo isset($_POST['nation'])?'国籍: '.$_POST['nation'].'<br>' :'';
}
?>
执行：
get提交数据：
demo1.html:
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function()
{
$("div:first").load('api/info.php','age=31&sex=女') //GET
})
</script>
info.php
<h3>赵丽颖</h3>
<p>《楚乔传》、《花千骨》、《杉杉来了》</p>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
echo isset($_GET['age'])?'年龄: '.$_GET['age'].'<br>' :'';
echo isset($_GET['age'])?'性别: '.$_GET['sex'].'<br>' :'';
}
?>
执行：
get,post提交添加都支持成功的回调
get执行成功的回调，将图片变为圆形：
demo1.html
<script type="text/javascript"src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function()
{
$("div:first").load('api/info.php','age=31&sex=女',function(){
$('img').css('border-radius','50%')
}) //callBack()
})
</script>
执行：
玖芹稗绒轻瘸遍逢汞翰淮韧摊