ajax 无刷新调用服务器文件
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<img src="images/zly.jpg" width="150">
<div></div>
<button>点击</button>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
$('div').eq(0)
.load('api/info.php')
// .load('api/info.php'+' p') //查询条件进行选择查询
// .load('api/info.php'+' h3') //功能同上进行条件选择
// .load('api/info.php',{birthday:'10月16日',nation:"中国"}) //调取info.php文档内容并添加新内容采用post方式
// .load('api/info.php','age=31&sex=女') //调取info.php内容采用GET 方式
.load('api/info.php','age=31&sex=女',function(){
$('img').css('border-radius','50%') //添加样式
})
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
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>' :'';
}
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
echo isset($_GET['age'])?'年龄: '.$_GET['age'].'<br>' :'';
echo isset($_GET['sex'])?'性别: '.$_GET['sex'].'<br>' :'';
}
?>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果图
手写代码：
总结：
ajax在网站开发中ajax是我们在前后端交互中是常使用的。
