Question

我一直在使用一些API从以下测试链接中获取信息：https://jsonplaceholder.typicode.com/photos，根据我插入的ID，我将信息获取到了可自定义的类似卡片的盒子中。

我希望添加一个文本框，输入的内容将是代码将接收到的ID。我该如何实现？

我有以下HTML代码和“文本框”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>My Test</title>
</head>

<body>
    <div class="container">
        <form>
            ID Filter:
            <br>
            <input type="text" name="id_filter" value="">
            <br>
            <div class="row">
                <button id="btn" type="button" class="mt-3 mx-auto btn btn-primary"> Get Post </button>
            </div>

            <div class="row" id="cardDiv"></div>
        </form>

    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script src="main.js"></script>
</body>
</html>

这是我的JavaScript代码，在这里我努力找出如何获取我的Textbox输入并将其放在方括号之间：

var $btn = document.getElementById("btn").addEventListener("click", getPost);
var $div = document.getElementById("cardDiv");

function getPost() {
    fetch('https://jsonplaceholder.typicode.com/photos')
    .then((res)=> {
        return res.json();
    })
    .then((post)=> {
            $div.innerHTML +=`
            <div class="card col-3 m-1 mx-auto">
                <img class="card-img-top" src="${post[0].thumbnailUrl}">
                <div class="card-body">
                    <b class="card-id"> ID: ${post[0].id} </b>
                    <br>
                    <b class="card-album"> Album: ${post[0].albumId} </b>
                    <h5 class="card-title"> ${post[0].title} </h5>
                    <u class="card-url"> ${post[0].thumbnailUrl} </u>
                </div>
            </div>
            `
    })
}

如何按按钮将输入的内容动态地转移到“文本框”，即括号内的“ 0”值？

Answer 1

在input中添加ID，并在其中填写图片ID。这将使以后的选择变得很容易。

<input type="text" id="image-id" name="id_filter" value="">

在JavaScript中选择该输入字段。每当单击按钮时，您将需要该字段中的值来获取具有相应ID的图像。

var imageIdFilter = document.getElementById('image-id');

var $btn = document.getElementById("btn").addEventListener("click", getPost);
var $div = document.getElementById("cardDiv");

现在，每当调用getPost函数时，就从value中提取input。将此value放在API URL的末尾。请求单个图像将产生不同的响应。之前您会收到一个对象数组，现在它只是一个对象。因此，所有post[0]都变成了post，因为它不再是数组了。

自行决定是否要通过将$div.innerHTML +=更改为$div.innerHTML =来添加图像或替换图像（请注意缺少+运算符）。

function getPost() {
    const id = imageIdFilter.value;
    fetch(`https://jsonplaceholder.typicode.com/photos/${id}`)
    .then((res)=> {
        return res.json();
    })
    .then((post)=> {
        $div.innerHTML +=`
            <div class="card col-3 m-1 mx-auto">
                <img class="card-img-top" src="${post.thumbnailUrl}">
                <div class="card-body">
                    <b class="card-id"> ID: ${post.id} </b>
                    <br>
                    <b class="card-album"> Album: ${post.albumId} </b>
                    <h5 class="card-title"> ${post.title} </h5>
                    <u class="card-url"> ${post.thumbnailUrl} </u>
                </div>
            </div>
            `
    });
}

我希望这会有所帮助。

Answer 2

我已经修改了您的示例并将其修改为在输入框中显示ID输入的帖子。

var $btn = document.getElementById("btn").addEventListener("click", getPost);
var $div = document.getElementById("cardDiv");
var $idInput = document.getElementById("id-filter");

function getPost() {
    fetch('https://jsonplaceholder.typicode.com/photos')
    .then((res)=> {
        return res.json();
    })
    .then((post)=> {
            var inputPostId = $idInput.value;
            var postForId = {};
            for(var i=0; i<post.length; i++) {
               if(post[i].id == inputPostId) {
                  postForId = post[i];
                  break;
               }
            }
            $div.innerHTML +=`
            <div class="card col-3 m-1 mx-auto">
                <img class="card-img-top" src="${postForId.thumbnailUrl}">
                <div class="card-body">
                    <b class="card-id"> ID: ${postForId.id} </b>
                    <br>
                    <b class="card-album"> Album: ${postForId.albumId} </b>
                    <h5 class="card-title"> ${postForId.title} </h5>
                    <u class="card-url"> ${postForId.thumbnailUrl} </u>
                </div>
            </div>
            `
    })
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>My Test</title>
</head>

<body>
    <div class="container">
        <form>
            ID Filter:
            <br>
            <input type="text" id="id-filter" name="id_filter" value="1">
            <br>
            <div class="row">
                <button id="btn" type="button" class="mt-3 mx-auto btn btn-primary"> Get Post </button>
            </div>
            <div class="row" id="cardDiv"></div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script src="main.js"></script>
</body>
</html>

如何将HTML文本框输入连接到Javascript过滤器POST代码？

2 个答案: