推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
请教: 如何使用 JavaScript 实现请求 api 并解析 json
Pzqqt · 2019-08-26 11:06:50 +08:00 · 7282 次点击这是一个创建于 1917 天前的主题，其中的信息可能已经有所发展或是发生改变。
问题案例
- 现有一个文件列表页面，打算在每个文件项后面添加一个按钮，点击之后代入文件名作为参数，调用 JavaScript 函数请求 api，这个 api 将返回文件哈希值 大小 最后修改日期等信息，格式为 json，请求完成后解析 json 并反馈到页面上。
在度娘上搜到了一些答案，不过都是使用 JQuery 实现的。请问有不使用 JQuery 实现的方法吗？
30 条回复 • 2019-08-27 15:19:41 +08:00
 |
1
jowan 2019-08-26 11:11:11 +08:00
不太明白你的意思 不就是为了请求 api 吗，不想用 jq 的话
原生 xhr? axios? |
 |
2
jorneyr 2019-08-26 11:11:19 +08:00
1. 原生 JS 的 Ajax
2. Axios 3. Fetch |
 |
3
sdxlh007 2019-08-26 11:14:55 +08:00  1
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; } } } } |
 |
4
lovedebug 2019-08-26 11:16:25 +08:00
很多异步请求库可以直接加载到页面使用的。
|
 |
5
Sapp 2019-08-26 11:36:37 +08:00
吓得我看了下时间...
这不就是现在各种前端渲染的 UI 框架的正常操作么？ ajax 发送一下请求，回来之后解析不就行了么？ |
 |
6
Hoshinokozo 2019-08-26 11:46:41 +08:00
jq 只是对 xhr 封装了一下而已，底层还是 xhr，楼主可能需要学习一下 AJAX 方面的知识
|
 |
7
1brother 2019-08-26 12:16:11 +08:00
Ajax 了解一下
|
 |
8
SuperMild 2019-08-26 12:27:31 +08:00
这个就是你想要的 http://vanilla-js.com
|
 |
9
wszgrcy 2019-08-26 12:34:07 +08:00 via Android 5
触发关键词 api,json，等待那个人出现
|
 |
10
agdhole 2019-08-26 12:35:25 +08:00
FetchAPI
Axios |
 |
12
ipwx 2019-08-26 12:52:17 +08:00 via Android 1
那一天，v 友再一次回想起了被辣个男人所支配的恐怖…
|
 |
13
sparkle2015 2019-08-26 13:17:52 +08:00
```
fetch(url) .then(res => res.json()) .then(data => console.log(data) ``` |
 |
14
IsaacYoung 2019-08-26 13:34:50 +08:00 via iPhone
🍌迟但到
|
 |
15
xrr2016 2019-08-26 14:04:35 +08:00 2
API JSON 这标签简直就是为那个男人定制的啊
|
 |
16
SilentDepth 2019-08-26 14:08:41 +08:00
|
 |
17
bojackhorseman 2019-08-26 14:13:07 +08:00
@SuperMild #8 我还认真的看了一遍，甚至点击了下载按钮，直到看到后面才笑出声。文档连接到 mdn 太真实了。
|
|
18
SuperMild 2019-08-26 15:33:11 +08:00
@bojackhorseman 我当初也是这样哈哈哈哈。不过这确实是个不错的学习材料，可以看看原生 js 怎么弄，随着 ES 版本不断提升，很多操作用原生写也不算很麻烦了。
|
|
19
SuperMild 2019-08-26 15:37:43 +08:00
@bojackhorseman 我搞错了，#16 那个网站才是学习材料。
|
 |
20
catch 2019-08-26 15:38:52 +08:00 via iPhone
mdn
|
 |
21
luzemin 2019-08-26 18:06:05 +08:00
|
 |
23
findmyself 2019-08-26 18:36:52 +08:00
好久没看到辣个男人了
|
 |
24
StarkWhite 2019-08-26 21:31:26 +08:00
@arrayJY 你搜一下 apijson 就知道了
|
 |
25
mrcotter2013 2019-08-26 21:51:33 +08:00 via Android
Axios 很好用
|
 |
26
JJstyle 2019-08-26 21:58:37 +08:00 via iPhone
哈哈哈，那个男人，😇😇🤣，只有经常逛 v 站的才知道这是什么梗吧
|
 |
27
araraloren 2019-08-27 08:35:25 +08:00
我还以为你们说的是 MingGeJs，一个更加神奇的男人。。
|
 |
28
rocy 2019-08-27 08:58:13 +08:00
那个男人应该不会出现了 站长把他处理了
|
 |
29
Pzqqt OP @sdxlh007 非常感谢你的回答，原来我只需要一个 XMLHttpRequest 方法而已。其实我是一个初学者，刚接触 web 框架不到三个月，目前在使用 Flask 框架，编写了一个简单的博客放到了服务器上，博客大部分都是静态页面，需要用到 JavaScript 也是现学现用。总之还是非常感谢你能回答我这个愚蠢的问题。
目前问题已经解决了，这是我编写好的博客后台文件管理界面，点击文件名前的图标即可显示文件的哈希信息。 http://148.70.149.207/uploads |
 |
30
wayneshen 2019-08-27 15:19:41 +08:00
axios+1
|
Select Language