<body>
<input type="text" />
<ul></ul>
<script>
const iput = document.querySelector("[type=text]");
iput.onkeyup = function (e) {
if (e.keyCode == 13) {
console.log(this.value);
var url = `search?type=1&;kw=${this.value}&page=1`;
// 引入
var xhr = new XMLHttpRequest();
// 设置请求头
xhr.open("get", url);
// 发送请求
xhr.send();
xhr.onload = function () {
const data = JSON.parse(this.response);
console.log(data);
var x = data.data.map((value) => {
return `<li>${value.name}</li>`;
});
const ul = document.querySelector("ul");
ul.innerHTML = x.join("");
};
}
};
</script>
</body>
实现搜索框回车请求服务器数据效果
最新推荐文章于 2024-09-14 18:52:56 发布