html 数据交互笔记

<script type="text/javascript">

 

$(function () {

 

 

 

//页面加载初始化数据

//当打开界面需要展示数据，就需要初始化，当打开界面点击按钮，在出现数据，就不需要初始化

BindData(');

//请求数据

function BindData(search) {

var sourseUrl = http + 'TeachingVideo';

var url = encodeURI(sourseUrl);

var data = JSON.stringify({ pageSize: pagesize, pageIndex: pageindex, keyWord: keyWord });

$.ajax({

type: "POST",

url: url,

contentType: 'application/json',

dataType: "json",

data: data,

success: function (res) {

if (res.state == 1) {

bindVideoList(res.data);

}

else {

alert('接口获取错误:' + res.info);

}

}

});

}

 

//绑定页面

function bindVideoList(data) {

if (data && data.length > 0) {

var html = '';

for (var i = 0; i < data.length; i++) {

//这里显示布局界面的冰洁内容

html += '<div class= "col-lg-2 col-md-2 col-sm-2 col-xs-2 vido_show">';

html += '<div class="vido_img">';

html += '<img src="' + data[i].coverimg + '" class="img-responsive" alt="Cinque Terre"></div>';

html += '<div class="vido_flii"><label class="vido_flel">' + data[i].videoname.substring(0, 17) + '</label>';

html += '<div class="vido_divTitle"><p class="vido_number">播放量： 200</p>';

html += '<p class="vido_pople">上传者：' + data[i].author.substring(0, 6) + '</p></div></div></div>';

}

$('.vido_foot').append(html)

}

else {

// alert('已经没有更多的数据了');

}

}

 

});