player
/
second2_后台.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>音乐播放器</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<script src="js/jquery-1.7.1.min.js"></script>
		<link rel="stylesheet" href="css/jquery.mobile.min.css">
		<script src="js/jquery.mobile.min.js"></script>
		<style>

		</style>
	</head>
	<body>
		<div data-role="page">
			<div data-role="header" data-theme="b" data-position="fixed">
				<a href="#">返回</a>
				<h1>音乐播放器</h1>
			</div>
			<!--新版本变成data-role="main"-->
			<div data-role="content">
				<ul data-role="listview" class="mylist">
					<!--<li><a href="third.html">
						<img src="img/tu1.png"  />
						<h3>一分钱</h3>
						<p>这是一个精典的歌</p></a>
					</li>-->

				</ul>
			</div>
			<div data-role="footer" data-position="fixed" data-theme="b">
				<div data-role="navbar">
					<ul>
						<li><a href="#" data-icon="home">首页</a></li>
						<li><a href="#" data-icon="grid">分类</a></li>
						<li><a href="#" data-icon="star">收藏</a></li>
						<li><a href="#" data-icon="gear">设置 </a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script>
		$.post("http://192.168.7.221:3000/songs",{verify:'1'},function(result){
			console.log(result)
			var songlist=result.song_list;
			var len=songlist.length;
			for(let i=0;i<len;i++){
				/*下面建立元素，相当于js中 createElement*/
				var oli=$("<li>")
				var oimg=$("<img/>")
				var oh3=$("<h3>")
				var op=$("<p>")
				let oa=$("<a data-ajax=false>")
				/*下面设置一下对应元素的属性*/
				oimg.attr("src",songlist[i].pic_small)
				oh3.text(songlist[i].title)
				op.text(songlist[i].author)

				/*加载歌曲的ajax*/
				song_id=songlist[i].song_id;
				$.post("http://192.168.7.221:3000/playsongs",{id:song_id},function(res){
					console.log(res)
					if(!res.error){
						let mp3=res.bitrate.file_link;
						/*想法把值与标签a建立联系，a标签和*.mp3联系
						 H5自定义属性
						 * */
						oa.attr("data-mp3",mp3)


					}

				})
				/*添加到对应容器上*/
				oa.append(oimg)
				oa.append(oh3)
				oa.append(op)
				oli.append(oa)
				/*加此事件为了实现点击*/
				oa.click(function(){
					/*第三种方法:
		 				* 解析后，把解析歌曲的名称给定后台地址http://192.168.7.221:3000/postmp3
		 			* 传送必须参数{mp3:歌曲名}
		 			* 提交相关数据都会用post
		 			*当文档一加载就要执行
		 			*/
					$.post("http://192.168.7.221:3000/postmp3",{mp3:oa.attr("data-mp3")},function(result){
						console.log(result)
						if(result.msg=="成功"){
							location.href="third_3copy.html"
						}
					})
				})
				$(".mylist").append(oli)
			}
			/*jqm特点，列表动态添加元素，一定要进行listview('refresh')刷新, 更新列表*/
			$(".mylist").listview('refresh')
		})
	</script>
</html>