通过javascript中的搜索栏输入从端点查询并获取数据

Question

此端点

http://vk-data:8003/v1/entity/

返回此：

[
    {
        "id": "country",
        "url": "http://vk-data:8003/v1/entity/country",
        "name": "Countries",
        "description": "All the countries in the world"
    },
    {
        "id": "data-site",
        "url": "http://vl-data:8003/v1/entity/data-site",
        "name": "World data storage",
        "description": "A catalog of health data"
    }
]

我想编写一个函数，允许用户通过搜索栏输入访问

data-site

或

country

数据。

我怎样才能让我的代码做到这一点？这是我到目前为止所拥有的。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">

</head>
<body>
<button id="catalog" onclick="RetrieveCatalog()">Get Catalog</button>

<input type="text" placeholder="Search for User" onChange={(e) => RetrieveEntities(e.target.value)} className="input_search" />
<button onClick={fetchData} className="search_button">Search Github</button>
<script>

//fetch catalog function
function RetrieveCatalog(){
    //http request
    fetch("http://vk-data:8003/v1/entity/")
    .then(function(data){
        console.log(data)
        return data.json()
    })
    .then(function(data){})
    .catch(error => console.error(error))
    }
    
    //fetch catalog function
function RetrieveEntities(){
    //http request
    fetch("http://vk-data:8003/v1/entity/${entities}")
    .then(function(data){
        console.log(data)
        return data.json()
    })
    .then(function(data){})
    .catch(error => console.error(error))
    }

</script>

</body>

</html>

Answer 1

我相信问题在于您对 JSX 和 HTML 语法感到困惑。

在某些方面您会混淆两者。以下是需要修复的地方。

在
```
<input>
```
标签中，将
```
onChange
```
属性更改为
```
onchange
```
。另外，请用引号 (
```
""
```
) 而不是大括号 (
```
{}
```
) 将函数括起来。
```
<input onchange="(e) => RetrieveEntities(e.target.value)" />
```

在同一个

<input>

标签中，将

className

属性更改为

class

。

<input class="input_search" />

在
```
<button>
```
元素中，将
```
onClick
```
属性更改为
```
onclick
```
，并用引号将值引起来。
```
<button onclick="fetch"></button>
```

在

<button>

标签中，将

className

更改为

class

。

<button class="search_button"></button>

HTML 代码中的这些更改应该有助于解决问题。

通过javascript中的搜索栏输入从端点查询并获取数据

问题描述投票：0回答：1

1个回答

最新问题

通过javascript中的搜索栏输入从端点查询并获取数据

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1