html+css+js 用jsonp调淘宝搜索接口
时间: 2024-02-26 22:55:39 浏览: 18
好的,下面是HTML、CSS、JS实现用JSONP调用淘宝搜索接口的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝搜索</title>
<style>
#search-form {
margin: 20px;
text-align: center;
}
#search-input {
width: 300px;
height: 30px;
padding: 5px;
font-size: 16px;
}
#search-button {
width: 80px;
height: 40px;
margin-left: 10px;
font-size: 16px;
}
#search-result {
margin: 20px;
}
</style>
</head>
<body>
<form id="search-form">
<input type="text" id="search-input" placeholder="请输入搜索关键词">
<input type="button" id="search-button" value="搜索">
</form>
<div id="search-result"></div>
<script>
function search(keyword) {
var url = 'https://suggest.taobao.com/sug?code=utf-8&q=' + keyword + '&callback=callbackFunction&area=c2c';
var script = document.createElement('script');
script.setAttribute('src', url);
document.body.appendChild(script);
}
function callbackFunction(data) {
var result = document.getElementById('search-result');
result.innerHTML = '';
var list = data.result;
for (var i = 0; i < list.length; i++) {
var item = list[i];
var link = 'https://s.taobao.com/search?q=' + item[0];
var html = '<div><a href="' + link + '">' + item[0] + '</a></div>';
result.innerHTML += html;
}
}
var searchButton = document.getElementById('search-button');
searchButton.addEventListener('click', function() {
var keyword = document.getElementById('search-input').value;
search(keyword);
});
</script>
</body>
</html>
```
该示例包含一个搜索表单,用户输入搜索关键词后,点击“搜索”按钮即可调用淘宝搜索接口并显示搜索结果。点击搜索结果中的链接即可跳转到淘宝搜索页面。
在该示例中,我们使用了HTML、CSS、JS实现了一个简单的搜索页面。当用户输入关键词并点击搜索按钮时,JS代码会调用 `search` 函数,该函数会发送一个 JSONP 请求,获取搜索结果并将其显示在页面上。JSONP请求返回的结果会调用 `callbackFunction` 函数进行处理,该函数会将搜索结果解析并显示在页面上。