服务器从假数据库中获取数据、读取数据、生成页面

最新推荐文章于 2022-11-14 20:48:51 发布

大名张无忌

最新推荐文章于 2022-11-14 20:48:51 发布

阅读量236

点赞数

分类专栏： Ajax 文章标签： bootstrap ajax html5

本文链接：https://blog.csdn.net/qq_40029828/article/details/105470969

版权

Ajax 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文介绍如何利用Ajax技术从假数据库中获取并动态显示数据。首先，静态展示页面使用了Bootstrap组件，并引入了jQuery。接着，通过动态查询功能实现数据交互，查询界面和返回结果界面无缝切换。最后，展示了非表单方式，通过点击链接实现页面跳转。

摘要由CSDN通过智能技术生成

1、静态显示页面

用到了bootstrap组件，记得先引入jquerymini.js
首页命名为index.php，方便浏览器识别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jqueryMin.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-success">
    <div class="panel-heading">LOL</div>
    <div class="panel-body">
        <div class="container">
            <div class="row">            </div>
        </div>
    </div>
</div>
<?php
include 'hello.php';
for ($i=0;$i<count($name);$i++){
    echo' <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                    <img src="'.$name[$i]['salary'].'" alt="...">
                        <div class="caption">
                            <h3>'.$name[$i]['uname'].'</h3>
                            <p><a href="#" class="btn btn-primary" role="button">查看详情</a> <a href="#" class="btn btn-default" role="button">删除</a></p>
                        </div>
                    </div>
                </div>  ';
}
?>
</body>
</html>

引用的模拟数据库文件hello如下

<?php
header('content-type:text/html;charset=utf-8');
$name=array(
    array('uname'=>'haha','age'=>15,'salary'=>'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3071390023,1754587841&fm=58'),
    array('uname'=>'BOB','age'=>22,'salary'=>'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1999613182,1371398197&fm=58'),
    array('uname'=>'LILI','age'=>8,'salary'=>'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1008857538,2213492441&fm=58'),
    array('uname'=>'ANNA','age'=>9,'salary'=>'https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1808499580,4003886069&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=bbbc96ea4c88ad5d0ebaa73df4a1b2f4')
);

?>

2、动态查询和返回数据

查询界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jqueryMin.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h4>个人信息查询界面</h4>
<form action="hello.php" method="get">
    <input name="yourname" type="text" placeholder="输入你的姓名">
    <input type="submit">
</form>
</body>
</html>

返回结果界面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>返回查询结果</title>
</head>
<body>
<?php
header('content-type:text/html;charset=utf-8');
$name=array(
    'haha'=>array('uname'=>'haha','age'=>15,'pic'=>'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3071390023,1754587841&fm=58'),
    'BOB'=>array('uname'=>'BOB','age'=>22,'pic'=>'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1999613182,1371398197&fm=58'),
    'LILI'=>array('uname'=>'LILI','age'=>8,'pic'=>'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1008857538,2213492441&fm=58'),
    'ANNA'=>array('uname'=>'ANNA','age'=>9,'pic'=>'https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1808499580,4003886069&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=bbbc96ea4c88ad5d0ebaa73df4a1b2f4')
);
$_GET;
echo '<br>';
//print_r($_GET['yourname']);
$yname=$_GET['yourname'];
$person=$name[$yname];
echo '<h2>姓名'.$person['uname'].'</h2>';
echo '<p>年龄'.$person['age'].'</p>';
echo '<img src="'.$person['pic'].'" alt="">';

?>

</body>
</html>

3、非form表单，直接点击链接跳转页面

index列表页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jqueryMin.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-success">
    <div class="panel-heading">person列表</div>
    <div class="panel-body">
        <div class="container">
            <div class="row">            </div>
        </div>
    </div>
</div>
<?php
include 'hello.php';
for ($i=0;$i<count($name);$i++){
    echo' <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                    <img src="'.$name[$i]['salary'].'" alt="...">
                        <div class="caption">
                            <h3>'.$name[$i]['uname'].'</h3>
                            <p><a href="detail.php?yourname='.$name[$i]['uname'].'" class="btn btn-primary" role="button">查看详情</a> <a href="#" class="btn btn-default" role="button">删除</a></p>
                        </div>
                    </div>
                </div>  ';
}
?>

</body>
</html>

跳转的详情页

<!--详情页-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>返回查询结果</title>
</head>
<body>
<?php
header('content-type:text/html;charset=utf-8');
$name=array(
    'haha'=>array('uname'=>'haha','age'=>15,'pic'=>'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3071390023,1754587841&fm=58'),
    'BOB'=>array('uname'=>'BOB','age'=>22,'pic'=>'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1999613182,1371398197&fm=58'),
    'LILI'=>array('uname'=>'LILI','age'=>8,'pic'=>'https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1008857538,2213492441&fm=58'),
    'ANNA'=>array('uname'=>'ANNA','age'=>9,'pic'=>'https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1808499580,4003886069&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=bbbc96ea4c88ad5d0ebaa73df4a1b2f4')
);
$_GET;
echo '<br>';
//print_r($_GET['yourname']);
$yname=$_GET['yourname'];
$person=$name[$yname];
echo '<h2>姓名'.$person['uname'].'</h2>';
echo '<p>年龄'.$person['age'].'</p>';
echo '<img src="'.$person['pic'].'" alt="">';

?>
<a href="index.php">返回person列表</a>
</body>
</html>