茶.ajax的代码

模板

{{ 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&timesort=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/)