用Jquery实现Ajax将接口数据渲染到HTML表给中

用Jquery实现Ajax将接口数据渲染到HTML表给中

  • jQuery依赖,本文是采用的CDN
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

.ajax()

参数简介

包含了1个参数,这个参数里面包含了$.ajax()所需要的请求设置以及回调函数

参数说明

  1. url(String):发送请求地址。
  2. type(String):请求方式(POST或GET),默认为GET。
  3. data(Object或String):发送到服务器的数据。如果不是字符串,将自动转换为字符串格式。GET请求中将附加在url后。
  4. dataType(String):服务器预期返回的数据类型。如果不指定,jquery将根据HTTP包MINE信息返回responseXML或responseText,并作为回调函数参数传递。可用类型:
    1)xml:返回XML文档,可用jquery处理
    2)html:返回纯文本HTML信息,包含的script标签会插入DOM时执行。
    script:返回纯文本JavaScript代码。如果没有设置cache参数,不会自动缓存结果。在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。
    3)json:返回JSON数据。
    4)jsonp:JSONP格式。使用JSONP形式调用函数时,例如myurl?callback=?,jquery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    5)text:返回纯文本字符串。
  5. complete(Function):请求完成后回调函数(请求成功或失败后均调用)。
  6. success(Function):请求成功回调函数。
  7. error(Function):请求失败时被调用的函数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考核3</title>
</head>
<body>
<div>
    <button id="getData">获取数据</button>
    <table border="1px solid black" id="company_table">

    </table>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $('#getData').click(function () {
        $.ajax({
            type:'get',
            url:'http://172.18.73.63:9527/api/findCompanys',
            success:function (result) {
               console.log(result);
               showData(result);
            },error:function (e) {
                console.log(e);
            }
        });
    });
        function showData(data) {
            var table = $('#company_table');
            table.empty();
            table.append('<tr><td>id</td><td>公司名称</td><td>地址</td><td>性质</td><td>CEO</td></tr>');
            for (var i=0;i<data.length;i++) {
                var str = '<tr><td>'+data[i].companyId+'</td><td>'+data[i].companyName+'</td><td>'+data[i].address+'</td><td>'+data[i].attribute+'</td><td>'+data[i].highManager+'</td></tr>';
                table.append(str);
            }
        }
</script>

结果在这里插入图片描述在这里插入图片描述

接口内容数据示例

  • 7
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

太多.梦想.完成

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值