《前端》jQuery-ajax例子

bellediao

于 2020-03-19 10:57:29 发布

阅读量432

点赞数

分类专栏：前端例子 #ajax 文章标签： ajax

本文链接：https://blog.csdn.net/bellediao/article/details/104962172

版权

这篇博客主要展示了两个jQuery AJAX的例子：一是利用AJAX将接口中的result字段绘制成表格；二是通过AJAX获取后端经纬度。在获取经纬度的例子中，解释了请求参数、数据查看方法以及接口设计的原理。同时也提供了相关资源链接以供深入学习。

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

我的jQuery-ajax的笔记：https://blog.csdn.net/bellediao/article/details/104239715

从其他博主那里截取的例子，并附有疑问解答。

例1：将接口中的result字段绘制成表格。

<!-- 将http://hebutgo.com:8080/maps/getMapsList接口中的result字段绘制成表格。 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax例子-接口中的result字段绘制成表格</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>
    <!-- 引入jquery -->
    <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: 'http://hebutgo.com:8080/maps/getMapsList',
                type: 'get',
                datatype: 'json',
                success: function (res) {
                    console.log(res);  //在console中查看数据
                    $.each(res.result, function (index, obj) {
                        $("#table").append(
                            "<tr><td>" + obj['申请人省份'] + "</td>" +
                            "<td>" + obj['counts'] + "<

最低0.47元/天解锁文章

bellediao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《前端》jQuery-ajax例子

前面有jQuery-ajax的笔记：https://blog.csdn.net/bellediao/article/details/104239715例1：将接口中的result字段绘制成表格。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫

专栏目录