用jQuery的ajax获取接口数据

Posted 2021-04-08 狐狸姬

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jQuery的ajax获取接口数据相关的知识，希望对你有一定的参考价值。

近期帮着前端做一些页面，对样式的要求不太高，主要是调用后端接口传数据或者展示出来。所以css方面涉及的不多，基本在写jQuery什么的。其中，调用后端接口的方法就是ajax了。这篇来总结下常用的ajax方法的参数，文章后半部分会举一个关于获取“历史上的今天”的例子，感兴趣的可以自己试试。

1. url

2. type

要求为==String类型==的参数，请求方式默认为get。一般为post或get，其他http请求方法，如put和delete也可以使用，但仅部分浏览器支持。

3. timeout

要求为==Number类型==的参数，设置请求超过时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4. async

要求为==Boolean类型==的参数，默认设置为true，所有请求均为异步请求。false为同步请求，将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5. cache

要求为==Boolean类型==的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6. data

要求为==Object或String类型==的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。对象必须为key/value格式。如果是数组，JQuery将自动为不同值对应同一个名称。

7. dataType

要求为==String类型==的参数，预期服务器返回的数据类型。可用类型如下：

xml：返回XML文档，可用JQuery处理
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行
script：返回纯文本javascript代码。不会自动缓存结果，除非设置了cache参数。在远程请求时（不在同一个域），所有post请求都将转换为get请求
json：返回JSON数据
jsonp：JSONP格式。（待理解）
text：返回纯文本字符串

8. beforeSend

要求为==Function类型==的参数，发送请求前可以修改XMLHttpRequest对象的函数。（待理解）

9. complete

要求为==Function类型==的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

10. success

要求为==Function类型==的参数，请求成功后调用的回调函数，有两个参数

由服务器返回，并根据dataType参数进行处理后的数据
描述状态的字符串

11. error

要求为==Function类型==的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象

12. contentType

要求为==String类型==的参数，当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。

13. dataFilter

要求为==Function类型==的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。

14. global

要求为==Boolean类型==的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件

15. ifModified

要求为==Boolean类型==的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

16. jsonp

这个参数我在一开始看网上教程时，并不知道是什么作用。后来我在自己写着玩，调用聚合的接口的时候，发现一直ERROR调不出。当时我的type写的是json。百度了一下说是域的问题，也不是很懂，改成jsonp就好了。

17. username

要求为==String类型==的参数，用于响应HTTP访问认证请求的用户名

18. password

要求为==String类型==的参数，用于响应HTTP访问认证请求的密码

19. processData

要求为==Boolean类型==的参数，默认为true。默认情况下，发送的数据将被转换为对象以配合默认内容类型”application/x-www-form-urlencoded”。如果要发送DOM树信息或者其他不希望转换的信息，设置为false。

20. scriptCharset

要求为==String类型==的参数，只有当请求时dataType为“jsonp”或者“script”，并且type是GET时才会用于强制修改字符集（charset）。通常在本地和远程的内容编码不同时使用。

例子

这边我用自己写着玩的调用聚合的“历史上的今天”这个接口的js。(和风天气的接口也不错，但老是用这个有点腻了，换换口味。)

主要涉及三个文件：test.html，test.js，url.js
样式调整以及引入的bootstrap之类的请自行解决
这里只是一个很简单的调用一个接口并把返回的数据展示出来的例子
聚合数据的接口和key大家自己去搞，当然也可以换成别的
json的解析请自己看你用的那个接口的文档，一层一层怎么搞的

test.html

由于历史上的今天很多，这边用了表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="css/test.css">

<body>
    <div id="jmBox">
        <h3>历史上的今天</h3>
        <label for="date">请选择某一天</label>
        <input class="form_datetime" id="dateHistory" type="text">
        <a href="javascript:;" id="btnHistory" class="btn btn-sm btn-success">查询</a>
        <div class="col-md-12 col-sm-12 col-xs-12" style="padding: 0">
            <table id="table" class="table table-hover table-bordered">
                <thead>
                    <tr class="info">
                        <th>日期</th>
                        <th>事件</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script ></script>
    <script ></script>
    <script ></script>
    <script ></script>
    <script type="text/javascript" ></script>
    <script type="text/javascript" ></script>
</body>
</html>

url.js

this.urlSpaceName = this.urlSpaceName || {};

(function() {
    var url = function() {};

    var fn = url;
    var keyJuhe = "";   //你的聚合数据Key

    fn.config = {
        todayInHistory : "http://v.juhe.cn/todayOnhistory/queryEvent.php?key=" + keyJuhe,
    }

    urlSpaceName.url = url;
})();

test.js

$(function() {

    //历史上的今天的接口
    var todayHistoryUrl = urlSpaceName.url.config.todayInHistory;

    //选取日期
    $(".form_datetime").datetimepicker({
        format: "mm-dd",
        autoclose: true,
        todayBtn: true,
        minView: 4,
        pickerPosition: "bottom-left",
        language: "zh-CN",
    });

    // 点击查询事件
    $("#btnHistory").click(function() {
        //获取用户所选择日期
        var date = $("#dateHistory").val().split('-');

        if(!!!date){
            alert("请选择日期");
        } else {
            var month = date[0];
            // 由于这个接口对小于10的月份和日期前面不能加0
            // 要把获取到的小于10的月份和日期进行截取
            if (month <= 10){
                month = month.substr(month.length-1,1);
            }

            var day = date[1];
            if (day <= 10){
                day = day.substr(day.length-1,1);
            }

            $.ajax({
                url: todayHistoryUrl+"&date="+month+"/"+day,
                dataType: "jsonp",
                type: "get",
                success: function(data) {
                    // 获取成功
                    console.log(data);
                    var Html = "";
                    if (data.reason == "success") {
                        if (!!!data.result){
                            //判断是否为空
                        } else {
                            // 循环把json中的数据加入表格中，没有用分页什么的
                            $.each(data.result, function(i, el) {
                                Html +=
                                    '<tr>' +
                                    '<td>' + el.date + "</td>" +
                                    '<td>' +  el.title + '</td>' +
                                    '</tr>'
                            })
                            $("#table tbody").html(Html);
                        }
                    } else {
                        console.log(data.error_code);
                    }
                },
                error: function() {
                    // 获取失败
                    console.log("ERROR");
                }
            });
        }

    });
});

效果图

结语

其实简单的调用接口数据并展示就是这样啦。提交数据的例子没有讲，大家可以自己查查，也是差不多的。预告下次聊一聊最近看到的几个比较好玩的前端网站，像echarts还有CodePen什么的。

以上是关于用jQuery的ajax获取接口数据的主要内容，如果未能解决你的问题，请参考以下文章

如何用JQUERY的ajax请求HTTPS的接口？？？

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

用JQuery实现ajax删除数据

尝试使用 Ajax 调用控制器方法 MVC 获取数据我的代码已附加

Ajax获取到后台json数据，然后怎么取其中name的值赋值给li标签里面

Javascript代码片段在drupal中不起作用