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

最新推荐文章于 2024-06-20 20:40:04 发布

太多.梦想.完成

最新推荐文章于 2024-06-20 20:40:04 发布

阅读量4.6k

点赞数 7

文章标签： HTML Ajax Jquery

本文链接：https://blog.csdn.net/weixin_44153063/article/details/103254548

版权

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

jQuery依赖，本文是采用的CDN

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

.ajax()

参数简介

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

参数说明

url(String)：发送请求地址。
type(String)：请求方式(POST或GET)，默认为GET。
data(Object或String)：发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。GET请求中将附加在url后。
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：返回纯文本字符串。
complete(Function)：请求完成后回调函数(请求成功或失败后均调用)。
success(Function)：请求成功回调函数。
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>