web实验2 ajax

最新推荐文章于 2024-11-13 17:30:56 发布

烟花汐音

最新推荐文章于 2024-11-13 17:30:56 发布

阅读量110

点赞数

文章标签： mysql javascript servlet

本文链接：https://blog.csdn.net/m0_61777878/article/details/127209183

版权

有很多人问这个连接不知道ajax的url怎么写啊

这里直接就简单的不教大家怎么写指教大家怎么用

首先这边使用的是PhpStorm 2021.1 x64

先将下面代码复制然后在你的WWW下的web文件夹中新建一个php文件再将下列代码粘贴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style type="text/css">
        .main {
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        #table {
            display: inline-block;
            vertical-align: top;
            border-collapse: collapse;
        }

        tr td {
            width: 200px;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    function printtable() {
        $.ajax({
            url: 'data/data.json',
            type: 'get',
            datatype: 'json',
            success: function (res) {
                console.log(res); 
                $.each(res.result, function (index, obj) {
                    $("#table").append(
                        "<tr><td>" + obj['申请人省份'] + "</td>" +
                        "<td>" + obj['counts'] + "</td><tr>");
                });
            }
        })
    }
</script>
<div class="main">
    <table id="table" >
        <tr>
            <th>申请人省份</th>
            <th>数量</th>
        </tr>
    </table>
    <input type="button" value="PRINT" onclick="printtable()" />
</div>
</body>
</html>

然后复制下面的代码然后在web文件夹下新建一个data文件夹新建记事本然后粘贴，

最后将文件名改为data.json就ok了

{"result":[{"申请人省份":"0","counts":1553},{"申请人省份":"上海市","counts":637},{"申请人省份":"云南省","counts":81},{"申请人省份":"内蒙古自治区","counts":52},{"申请人省份":"北京市","counts":1186},{"申请人省份":"吉林省","counts":90},{"申请人省份":"四川省","counts":443},{"申请人省份":"天津市","counts":249},{"申请人省份":"宁夏回族自治区","counts":15},{"申请人省份":"安徽省","counts":1633},{"申请人省份":"山东省","counts":780},{"申请人省份":"山西省","counts":60},{"申请人省份":"广东省","counts":1575},{"申请人省份":"广西壮族自治区","counts":367},{"申请人省份":"新疆维吾尔自治区","counts":48},{"申请人省份":"江苏省","counts":1889},{"申请人省份":"江西省","counts":90},{"申请人省份":"河北省","counts":164},{"申请人省份":"河南省","counts":261},{"申请人省份":"浙江省","counts":905},{"申请人省份":"海南省","counts":20},{"申请人省份":"湖北省","counts":439},{"申请人省份":"湖南省","counts":211},{"申请人省份":"甘肃省","counts":71},{"申请人省份":"福建省","counts":277},{"申请人省份":"西藏自治区","counts":5},{"申请人省份":"贵州省","counts":108},{"申请人省份":"辽宁省","counts":199},{"申请人省份":"重庆市","counts":193},{"申请人省份":"陕西省","counts":270},{"申请人省份":"青海省","counts":15},{"申请人省份":"香港","counts":1},{"申请人省份":"黑龙江省","counts":215}],"reason":"","status":"success"}