我希望在加载页面时以及在输入字段中放入一些文本时使用单个获取请求。例如，有一个带有输入字段的页面A，用户将键入一些内容，然后重定向到页面B，在那里将立即调用获取请求并返回结果。然后，当用户在页面B上时，如果想更改搜索条件，我想创建一个新的获取请求并取回数据。我可以取回数据，但如果用户点击结果控制台日志，就会触发两次而不是一次。知道如何克服这个问题吗？感谢
这是我的设置。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="search" value=1 id="search">
<button type="button" name="button" id="startSearch">Search</button>
<table id="results"></table>
<script type="text/javascript">
let searchString = document.getElementById('search')
let resultDiv = document.getElementById('results')
fetch('https://jsonplaceholder.typicode.com/users/'+searchString.value)
.then(response => response.json())
.then(json => {
resultDiv.innerHTML = ''
let tr = document.createElement('tr')
let td = document.createElement('td')
let text = document.createTextNode(json.name)
td.appendChild(text)
tr.appendChild(td)
resultDiv.appendChild(tr)
})
resultDiv.addEventListener('click', (e) => {
console.log('click1')
console.log(e.target.innerText)
})
</script>
</body>
</html>
what I have also tried is this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="search" value=1 id="search">
<button type="button" name="button" id="startSearch">Search</button>
<table id="results"></table>
<script type="text/javascript">
let searchString = document.getElementById('search')
let resultDiv = document.getElementById('results')
fetch('https://jsonplaceholder.typicode.com/users/'+searchString.value)
.then(response => response.json())
.then(json => {
resultDiv.innerHTML = ''
let tr = document.createElement('tr')
let td = document.createElement('td')
let text = document.createTextNode(json.name)
td.appendChild(text)
tr.appendChild(td)
resultDiv.appendChild(tr)
})
resultDiv.addEventListener('click', (e) => {
console.log(e.target)
})
searchString.addEventListener('input', (e) => {
fetch('https://jsonplaceholder.typicode.com/users/'+searchString.value)
.then(response => response.json())
.then(json => {
resultDiv.innerHTML = ''
let tr = document.createElement('tr')
let td = document.createElement('td')
let text = document.createTextNode(json.name)
td.appendChild(text)
tr.appendChild(td)
resultDiv.appendChild(tr)
})
})
resultDiv.addEventListener('click', (e) => {
console.log(e.target)
})
</script>
</body>
</html>
但当我点击td元素时，我得到了两次，原因很清楚。所以，我的问题是，我是否可以以某种方式获得一个用于页面加载和输入事件侦听器的提取请求
您的代码不会激发console.log事件两次，而是像预期的那样只激发一次。
- 打开jsfiddle.net
- 将代码粘贴到html面板中
- 打开浏览器控制台
- 运行代码
- 单击搜索结果
- console.log只激发一次