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

Question

I have been using some API's to obtain information from the following test link: https://jsonplaceholder.typicode.com/photos in which according to the ID I insert, I obtain the information into a customizable card-like box.我一直在使用一些 API 从以下测试链接中获取信息： https : //jsonplaceholder.typicode.com/photos ，其中根据我插入的 ID，我将信息获取到一个可定制的卡片式盒子中。

I wish to add a textbox where my input will be the ID that the code will recieve.我希望添加一个文本框，其中我的输入将是代码将接收的 ID。 How can I achieve this?我怎样才能做到这一点？

I have the following HTML code, with the Textbox:我有以下 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>

This is my JavaScript code, where I'm struggling to figure out how to fetch my Textbox input, and put it in between the brackets:这是我的 JavaScript 代码，我正在努力弄清楚如何获取我的文本框输入，并将其放在括号之间：

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>
            `
    })
}

How can I dinamically transfer my input towards the Textbox upon pressing by button, towards the '0' value in between brackets?如何在按下按钮时将我的输入动态传输到文本框，朝向括号之间的“0”值？

Answer 1

Add an ID to the input in which you fill in the id of your image.将 ID 添加到您填写图像 ID 的input中。 This will make it easy to select later on.这将便于以后选择。

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

Select that input field in JavaScript.在 JavaScript 中选择该输入字段。 Whenever the button is clicked you will need the value that is in that field to get the image with the corresponding ID.每当单击按钮时，您都需要该字段中的值来获取具有相应 ID 的图像。

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

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

Now whenever you call the getPost function extract the value from the input .现在，每当您调用getPost函数时，都会从input提取value 。 Put this value at the end of your API URL.将此value放在 API URL 的末尾。 Requesting a single image will produce a different response.请求单个图像将产生不同的响应。 Earlier you would receive an array of object, now it is just a single object.之前你会收到一个对象数组，现在它只是一个对象。 So all post[0] have be turned into post , since it is not an array anymore.所以所有的post[0]都变成了post ，因为它不再是一个数组。

Decide for yourself if you want to either add an image or replace an image by changing the $div.innerHTML += to $div.innerHTML = (notice the missing + operator).如果你想通过更改添加图片或替换图像自行决定$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>
            `
    });
}

I hope this is of any help.我希望这有任何帮助。

Answer 2

I have adapted your example and modified it to display the post for the id input in the input box.我已经调整了您的示例并将其修改为在输入框中显示 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 个解决方案

解决方案1
0 2019-12-29 00:28:52

解决方案2
0 已采纳 2019-12-29 00:51:43

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

问题描述

2 个解决方案

解决方案1 0 2019-12-29 00:28:52

解决方案2 0 已采纳 2019-12-29 00:51:43

解决方案1
0 2019-12-29 00:28:52

解决方案2
0 已采纳 2019-12-29 00:51:43