请教: 如何使用 JavaScript 实现请求 api 并解析 json

[Pzqqt]

问题案例

• 现有一个文件列表页面，打算在每个文件项后面添加一个按钮，点击之后代入文件名作为参数，调用 JavaScript 函数请求 api，这个 api 将返回文件哈希值 大小 最后修改日期等信息，格式为 json，请求完成后解析 json 并反馈到页面上。

在度娘上搜到了一些答案，不过都是使用 JQuery 实现的。请问有不使用 JQuery 实现的方法吗？

[jowan]

不太明白你的意思 不就是为了请求 api 吗，不想用 jq 的话
原生 xhr? axios?

[jorneyr]

1. 原生 JS 的 Ajax
2. Axios
3. Fetch

[sdxlh007]

function ajax(url){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
        xhr.open("get",url,true);
        xhr.send();
        xhr.onreadysattechange = () =>{
            if(xhr.readystate == 4){
                if(xhr.status == 200){
                    var data = xhr.responseTEXT;
                    return data;
                }
            }
        }    
    }

[lovedebug]

很多异步请求库可以直接加载到页面使用的。

[Sapp]

吓得我看了下时间...
这不就是现在各种前端渲染的 UI 框架的正常操作么？ ajax 发送一下请求，回来之后解析不就行了么？

[Hoshinokozo]

jq 只是对 xhr 封装了一下而已，底层还是 xhr，楼主可能需要学习一下 AJAX 方面的知识

[1brother]

Ajax 了解一下

[SuperMild]

这个就是你想要的 http://vanilla-js.com

[wszgrcy]

触发关键词 api,json，等待那个人出现

[agdhole]

FetchAPI
Axios

[xlui]

@wszgrcy 那个男人要出现了吗？

[ipwx]

那一天，v 友再一次回想起了被辣个男人所支配的恐怖…

[sparkle2015]

```
fetch(url)
.then(res => res.json())
.then(data => console.log(data)
```

[IsaacYoung]

🍌迟但到

[xrr2016]

API JSON 这标签简直就是为那个男人定制的啊

[SilentDepth]

http://youmightnotneedjquery.com/

[bojackhorseman]

@SuperMild #8 我还认真的看了一遍，甚至点击了下载按钮，直到看到后面才笑出声。文档连接到 mdn 太真实了。

[SuperMild]

@bojackhorseman 我当初也是这样哈哈哈哈。不过这确实是个不错的学习材料，可以看看原生 js 怎么弄，随着 ES 版本不断提升，很多操作用原生写也不算很麻烦了。

[SuperMild]

@bojackhorseman 我搞错了，#16 那个网站才是学习材料。

[catch]

mdn

[luzemin]

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

[arrayJY]

@ipwx 那个男人是哪个？

[findmyself]

好久没看到辣个男人了

[StarkWhite]

@arrayJY 你搜一下 apijson 就知道了

[mrcotter2013]

Axios 很好用

[JJstyle]

哈哈哈，那个男人，😇😇🤣，只有经常逛 v 站的才知道这是什么梗吧

[araraloren]

我还以为你们说的是 MingGeJs，一个更加神奇的男人。。

[rocy]

那个男人应该不会出现了 站长把他处理了

[Pzqqt]

@sdxlh007 非常感谢你的回答，原来我只需要一个 XMLHttpRequest 方法而已。其实我是一个初学者，刚接触 web 框架不到三个月，目前在使用 Flask 框架，编写了一个简单的博客放到了服务器上，博客大部分都是静态页面，需要用到 JavaScript 也是现学现用。总之还是非常感谢你能回答我这个愚蠢的问题。
目前问题已经解决了，这是我编写好的博客后台文件管理界面，点击文件名前的图标即可显示文件的哈希信息。
http://148.70.149.207/uploads

[wayneshen]

axios+1