douban

何泽丰

project

发布于：May 7, 2019

使用豆瓣api做联想搜索

项目目的：进行JQuery和Ajax的练习，仿照豆瓣的输入联想功能。在豆瓣后台返回数据的时候点击选项跳转到相关页面。

首先我们先写一下样式，仿照豆瓣的导航栏还有搜索框写一个样式。

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">
    <title>Document</title>
    <link rel="stylesheet" href="src/css/index.css">
</head>
<body>
    <div class="wrapper">
        <div class="nav">
            <div class="nav-left">
                <ul>
                    <li>豆瓣</li>
                    <li>读书</li>
                    <li>电影</li>
                    <li>音乐</li>
                    <li>同城</li>
                    <li>小组</li>
                    <li>阅读</li>
                    <li>FM</li>
                    <li>时间</li>
                    <li>豆品</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="nav-right">
                <ul>
                    <li>下载客户端</li>
                    <li>注册/登录</li>
                </ul>
            </div>
        </div>
        <div class="main-music">
                <div class="main-wrapper">
                    <div class="main-logo"></div>
                    <div class="main-search">
                        <form action="">
                            <input type="text" placeholder="唱片名，表演者"  class="search" >
                            <input type="submit" class="submit">
                        </form>
                    </div>
                    <div class="main-list">
                        <ul>

                        </ul>
                    </div>
                </div>
        </div>
    </div>
    <script src="../jquery.js"></script>
    <script src="src/js/index.js"></script>
</body>
</html>

CSS样式

*{
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

html body{
    width: 100%;
    height: 100%;
}

.wrapper{
    width: 100%;
    height: 100%;
    position: relative;
}

.nav{
    position: relative;
    width: 100%;
    height: 28px;
    min-width: 950px;
    background: #5d5d5d;
}

.nav li{
    display: inline-block;
    color: #d5d5d5;
    line-height: 28px;
    margin-left: 5px;
}

.nav-left{
    position:absolute;
    left: 5px;
}

.nav-right{
    position: absolute;
    right: 5px;
}

.main-music{
    position: relative;
    width: 100%;
    height: 100px;
    border-bottom: 1px solid black;
    background-color: #f0f3ef;

}

.main-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    left: 100px;
}

.main-wrapper .main-logo{
    position: relative;
    display: inline-block;
    top: 15px;
    float: left;
    width: 200px;
    height:80px;
    background-image: url("../bg.png");
    background-size: 100% 100%;
}

.main-wrapper .main-search{
    float: left;
    display: inline-block;
    width: 500px;
    height: 100px;
    line-height: 100px;
    color: #5d5d5d;
    font-size: 30px;
}

.main-search .search{
    position: relative;
    width: 250px;
    height: 30px;
    border-radius: 20px;
    overflow: hidden;
    left: 20px;
}

.main-search .submit{
    position: relative;
    width: 50px;
    height: 30px;
    border-radius: 20px;
    overflow: hidden;
    left: 30px;

}

.main-list ul{
    display: inline-block;
    position: absolute;
    width: 500px;
    height: 500px;
    left: 225px;
    top: 75px;
}

.main-list li{
    display: block;
    position: relative;
    width: 200px;
    height: 150px;
    font-size: 18px;
    font-family: "黑体";
    background: #b1cbe0;
    border: 1px solid #d5d5d5;
    opacity: 0.7;
    text-align: center;
}


.main-list img{
    display: block;
    width: 100px;
    height: 100x;
}

上网查找豆瓣开发者API V2, 以前这里有文档写着后台接口，现在没有需要自己摸索（查资料）才能知道豆瓣的后台接口使啥。摸索完接口之后，我们这里用音乐接口作为例子，使用JQuery和封装Ajax,进行后台数据的接受。

javascript代码

    (function(){
    var $search = $('.search');
    var $ul = $('ul','.main-list');
    $search.on('input',function(){
        var value = $(this).val();
        console.log(value);
        getData(value ,7);
    })
    function getData(value, num){
        $.ajax({
            type:'get',             //获取方式为get
            url :'https://api.douban.com/v2/music/search',  //豆瓣音乐后台地址
            data: 'q=' + value +'&count=' + num,    //获取的数据
            dataType :'jsonp',      //获取方式为jsonp
            success : addItem       //获取成功之后的函数addItem
        })
    }
    function addItem(data){
        var list = data.musics;
        var str = '';
        list.forEach(function(ele ,index){
            str += '<li>"'+ele.title+'"<a href="https://music.douban.com/subject/'+ele.id+'/"><img src="'+ele.image+'" ></a></li>'
        })
        $ul.html($(str));
    }
})()