V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Pzqqt
V2EX  ›  JavaScript

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

  •  
  •   Pzqqt · 2019-08-26 11:06:50 +08:00 · 7303 次点击
    这是一个创建于 1942 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题案例

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

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

    30 条回复    2019-08-27 15:19:41 +08:00
    jowan
        1
    jowan  
       2019-08-26 11:11:11 +08:00
    不太明白你的意思 不就是为了请求 api 吗,不想用 jq 的话
    原生 xhr? axios?
    jorneyr
        2
    jorneyr  
       2019-08-26 11:11:19 +08:00
    1. 原生 JS 的 Ajax
    2. Axios
    3. Fetch
    sdxlh007
        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;
                    }
                }
            }    
        }
    lovedebug
        4
    lovedebug  
       2019-08-26 11:16:25 +08:00
    很多异步请求库可以直接加载到页面使用的。
    Sapp
        5
    Sapp  
       2019-08-26 11:36:37 +08:00
    吓得我看了下时间...
    这不就是现在各种前端渲染的 UI 框架的正常操作么? ajax 发送一下请求,回来之后解析不就行了么?
    Hoshinokozo
        6
    Hoshinokozo  
       2019-08-26 11:46:41 +08:00
    jq 只是对 xhr 封装了一下而已,底层还是 xhr,楼主可能需要学习一下 AJAX 方面的知识
    1brother
        7
    1brother  
       2019-08-26 12:16:11 +08:00
    Ajax 了解一下
    SuperMild
        8
    SuperMild  
       2019-08-26 12:27:31 +08:00
    这个就是你想要的 http://vanilla-js.com
    wszgrcy
        9
    wszgrcy  
       2019-08-26 12:34:07 +08:00 via Android   ❤️ 5
    触发关键词 api,json,等待那个人出现
    agdhole
        10
    agdhole  
       2019-08-26 12:35:25 +08:00
    FetchAPI
    Axios
    xlui
        11
    xlui  
       2019-08-26 12:37:57 +08:00 via Android   ❤️ 1
    @wszgrcy 那个男人要出现了吗?
    ipwx
        12
    ipwx  
       2019-08-26 12:52:17 +08:00 via Android   ❤️ 1
    那一天,v 友再一次回想起了被辣个男人所支配的恐怖…
    sparkle2015
        13
    sparkle2015  
       2019-08-26 13:17:52 +08:00
    ```
    fetch(url)
    .then(res => res.json())
    .then(data => console.log(data)
    ```
    IsaacYoung
        14
    IsaacYoung  
       2019-08-26 13:34:50 +08:00 via iPhone
    🍌迟但到
    xrr2016
        15
    xrr2016  
       2019-08-26 14:04:35 +08:00   ❤️ 2
    API JSON 这标签简直就是为那个男人定制的啊
    SilentDepth
        16
    SilentDepth  
       2019-08-26 14:08:41 +08:00
    bojackhorseman
        17
    bojackhorseman  
       2019-08-26 14:13:07 +08:00
    @SuperMild #8 我还认真的看了一遍,甚至点击了下载按钮,直到看到后面才笑出声。文档连接到 mdn 太真实了。
    SuperMild
        18
    SuperMild  
       2019-08-26 15:33:11 +08:00
    @bojackhorseman 我当初也是这样哈哈哈哈。不过这确实是个不错的学习材料,可以看看原生 js 怎么弄,随着 ES 版本不断提升,很多操作用原生写也不算很麻烦了。
    SuperMild
        19
    SuperMild  
       2019-08-26 15:37:43 +08:00
    @bojackhorseman 我搞错了,#16 那个网站才是学习材料。
    catch
        20
    catch  
       2019-08-26 15:38:52 +08:00 via iPhone
    mdn
    luzemin
        21
    luzemin  
       2019-08-26 18:06:05 +08:00
    arrayJY
        22
    arrayJY  
       2019-08-26 18:35:15 +08:00
    @ipwx 那个男人是哪个?
    findmyself
        23
    findmyself  
       2019-08-26 18:36:52 +08:00
    好久没看到辣个男人了
    StarkWhite
        24
    StarkWhite  
       2019-08-26 21:31:26 +08:00
    @arrayJY 你搜一下 apijson 就知道了
    mrcotter2013
        25
    mrcotter2013  
       2019-08-26 21:51:33 +08:00 via Android
    Axios 很好用
    JJstyle
        26
    JJstyle  
       2019-08-26 21:58:37 +08:00 via iPhone
    哈哈哈,那个男人,😇😇🤣,只有经常逛 v 站的才知道这是什么梗吧
    araraloren
        27
    araraloren  
       2019-08-27 08:35:25 +08:00
    我还以为你们说的是 MingGeJs,一个更加神奇的男人。。
    rocy
        28
    rocy  
       2019-08-27 08:58:13 +08:00
    那个男人应该不会出现了 站长把他处理了
    Pzqqt
        29
    Pzqqt  
    OP
       2019-08-27 10:10:05 +08:00
    @sdxlh007 非常感谢你的回答,原来我只需要一个 XMLHttpRequest 方法而已。其实我是一个初学者,刚接触 web 框架不到三个月,目前在使用 Flask 框架,编写了一个简单的博客放到了服务器上,博客大部分都是静态页面,需要用到 JavaScript 也是现学现用。总之还是非常感谢你能回答我这个愚蠢的问题。
    目前问题已经解决了,这是我编写好的博客后台文件管理界面,点击文件名前的图标即可显示文件的哈希信息。
    http://148.70.149.207/uploads
    wayneshen
        30
    wayneshen  
       2019-08-27 15:19:41 +08:00
    axios+1
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1417 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 17:28 · PVG 01:28 · LAX 09:28 · JFK 12:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.