<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>嘿马音乐</title>
<script type="text/javascript" src="${ pageContext.request.contextPath }/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath }/search.js"></script>
<style type="text/css">
#d1 tr:hover{
background-color: #ddd;
}
</style>
</head>
<body style="min-height: 600px;">
<div style="text-align: center;">
<h1>嘿马♪♫</h1>
<input type="text" id="key" name="key" style="width:400px;height:30px;" placeholder="刚刚好">
<input id="querybtn" type="button" value="嘿一下" style="height: 30px;margin-left: 2px;">
</div>
<div id="d1" style="display:none;position:absolute;top:103px;left:400px;border:1px solid gray;width:400px;height:200px;"></div>
</body>
</html>
var index = 0;
var oldIndex = 0;
$(function(){
// 为文本框绑定事件:
$("#key").keyup(function(event){
var currentCode = event.keyCode;
if(currentCode==13 && $("#d1 td").size()!=0){
//回车键的时候选中当前 并关闭
$("#d1").hide();
return;
}
// 获得文本框的值:
var word = $(this).val();
// 异步发送请求:
if(currentCode!=38 && currentCode!=40){
if(word != ""){
$.post("/online_music/RecommendMusicServlet",{"key":word},function(data){
if(""!=$.trim(data)){
$("#d1").show().html(data);
$("#d1 td").each(function(){
$(this).click(function(){
$("#key").val($(this).text());
$("#d1").hide();
});
});
}else{
$("#d1").hide();
}
});
}else{
$("#d1").hide();
}
}else{
var size = $("#d1 td").size();
if(size==0){
return;
}
$("#d1 td").eq(index).css("background-color","#ddd");
$("#d1 td").eq(oldIndex).css("background-color","");
$("#key").val($("#d1 td").eq(index).text());
if(currentCode==38){//向上
if(index!=0){
oldIndex = index;
index--;
}else{
oldIndex = index;
index = size-1;
}
}else if(currentCode==40){//向下
if(index>=(size-1)){
oldIndex = index;
index = 0;
}else{
oldIndex = index;
index++;
}
}
}
});
//点击body的时候关闭推荐面板
$("body").click(function(){
$("#d1").hide();
});
$("#key").focus(function(){
var word = $(this).val();
if(word != ""){
$.post("/online_music/RecommendMusicServlet",{"key":word},function(data){
if(""!=$.trim(data)){
$("#d1").show().html(data);
$("#d1 td").each(function(){
$(this).click(function(){
$("#key").val($(this).text());
$("#d1").hide();
});
});
}else{
$("#d1").hide();
}
});
}else{
$("#d1").hide();
}
});
//点击查询按钮“嘿一下”进行模糊查询
$("#querybtn").click(function(){
var word = $("#key").val();
world = $.trim(word);
if(word != ""){
window.open("/online_music/PageSong?w="+word);
}
});
});
package com.net023.servlet;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import jodd.http.HttpRequest;
import jodd.http.HttpResponse;
import jodd.json.JsonParser;
@WebServlet("/RecommendMusicServlet")
public class RecommendMusicServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
// 接收参数:
request.setCharacterEncoding("UTF-8");
String word = request.getParameter("key").trim();
//https://c.y.qq.com/soso/fcgi-bin/client_search_cp?p=3&n=30&w=七里香&format=json
List<Map<String, Object>> itemlist = null;
if(null!=word&&!"".equals(word)){
HttpResponse httpResponse = HttpRequest.get("https://c.y.qq.com/splcloud/fcgi-bin/smartbox_new.fcg?is_xml=0&format=json").query("key", word).send();
String bodyText = httpResponse.bodyText();
Map<String, Object> dd = new JsonParser().parse(bodyText);
Map<String, Object> data = (Map<String, Object>) dd.get("data");
Map<String, Object> song = (Map<String, Object>) data.get("song");
if(null!=song){
itemlist = (List<Map<String, Object>>) song.get("itemlist");
}
}
/**
* {
"docid": "3236607256197134876",
"id": "107762070",
"mid": "001hs89m3C5p3g",
"name": "小半",
"singer": "陈粒"
},
*/
request.setAttribute("list", itemlist);
request.getRequestDispatcher("/info.jsp").forward(request, response);
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:if test="${not empty list }">
<table border="0" width="100%">
<c:forEach var="song" items="${ list }">
<tr>
<td id="${song.mid }">${ song.name }</td>
</tr>
</c:forEach>
</table>
</c:if>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>搜索结果</title>
</head>
<body>
<ul>
<c:forEach items="${songlist }" var="song">
<c:if test="${not empty song.songmid }">
<li>
<img alt="" src="https://y.gtimg.cn/music/photo_new/T002R150x150M000${song.albummid }.jpg">
<a href="${ pageContext.request.contextPath }/ListenToMusicServlet?songMid=${song.songmid }" target="_blank">#歌曲名称：${song.songname } #歌手：${song.singer[0].name }</a>
</li>
<br/>
<br/>
</c:if>
</c:forEach>
</ul>
</body>
</html>
7.png (19.01 KB, 下载次数: 3)
1.83 MB, 下载次数: 33
军哥，屌屌的Oliverwqcwrw 发表于 2017-9-2 10:42
听过米粒姑娘的电台吗,挺好的
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |
