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

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

  •  
  •   Pzqqt · 85 天前 · 4294 次点击
    这是一个创建于 85 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题案例

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

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

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