zoukankan      html  css  js  c++  java
  • TVMAZE API应用:查找电影图片

    refer to: https://www.udemy.com/course/the-web-developer-bootcamp/

    输入电影的名称,返回所匹配的所有电影对应的图片

    API: https://www.tvmaze.com/api

    postman tool:  key, value to add parameters

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TV Show Search</title>
    
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
    </head>
    
    <body>
        <h1>TV Show Search</h1>
        <form id="searchForm">
            <input type="text" placeholder="TV Show Title" name="query">
            <button>Search</button>
        </form>
        <script src="app.js"></script>
    </body>
    
    </html>
    const form = document.querySelector('#searchForm');
    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        const searchTerm = form.elements.query.value;
        const config = { params: { q: searchTerm } } //add parameters
        const res = await axios.get(`http://api.tvmaze.com/search/shows`, config);
        makeImages(res.data)
        form.elements.query.value = '';
    })
    
    const makeImages = (shows) => {
        for (let result of shows) {
            if (result.show.image) {
                const img = document.createElement('IMG');
                img.src = result.show.image.medium; //check the details of JSON using postman
                document.body.append(img)
            }
        }
    }
  • 相关阅读:
    moment.js相关知识总结
    git相关使用解释
    .我的第一篇博客
    QT项目配置
    重载->
    内核对象同步
    模式对话框与非模式对话框
    显示与隐式类型转换
    size_t与size_type
    系统级源代码:系统裁剪
  • 原文地址:https://www.cnblogs.com/LilyLiya/p/14334165.html
Copyright © 2011-2022 走看看