模板
{{ each list value }}
<div class="item clearfix">
<a href="{{ value.article_url }}" class="title" target="_blank">
<img src="{{ value.article_img_url }}" alt="">
<span>{{ value.article_date }}</span>
</a>
<div class="content">
<a href="{{ value.article_url }}" target="_blank">{{ value.article_title }}</a>
<p>{{value.article_content}}</p>
</div>
<div class="info clearfix">
<a href="#" class="f_l"><img src="{{ value.article_author_avatar }}" alt="">{{ value.article_author_name }}</a>
<a href="#" class="f_r">信息:2</a>
<a href="#" class="f_r">❤:2</a>
<a href="#" class="f_r">赞:2</a>
</div>
</div>
{{ /each }}
</script>
请求
<script>
//找到容器
var items = document.querySelector('.items');
//给加载更多一个点击事件
document.querySelector('.getSome').onclick = function(){
//1. 创建请求对象
var xhr = new XMLHttpRequest();
//2. 设置请求行
xhr.open('get','https://post.smzdm.com/home/json_more/?filter=all×ort=1531112433&p=2');
//3. 发送请求
xhr.send();
//4. 监听响应完成
xhr.onload = function(){
//转成JS数据
var obj = JSON.parse(xhr.responseText)
console.log(obj)
//生成模板的html
var html = template('tpl',{ list: obj.data });
items.innerHTML += html;
}
};
</script>
ajax
$('#btn').click(function(e){
e = e || window.event;
e.preventDefault(); //阻止事件默认行为
//用法:找到表单,然后调用serialize方法
//作用:可以把这个表单内的所有带name的表单元素拼接成要请求的参数字符串
//就是 key1=value1&key2=value2的形式
var data = $('form').serialize();
console.log(data);
//发异步请求,就不会跳转
$.get({
url:"data.php",
data: data,
success:function(obj){
console.log(obj);
}
})
})
模板下载地址:(https://aui.github.io/art-template/)