jq ajax实现简单的异步加载,动态添加标签

jq ajax实现简单的异步加载

很多刚学ajax异步数据渲染的时候都是头大，刚开始我也头大，但是捋清楚其中的关系后就一切明朗清晰了；

html代码：

<div class="title">点我加载</div>
		<!--<p id="title">hello world!</p>--> //下面初学下发的写法2用到

先看看json结构，接口问后端的同事要的，当然，这是一个非常简单的接口，只是用来学习用的

js代码:

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>//引入jq库
		<script type="text/javascript">
			$(document).ready(function() {
				var url = "你请求的接口地址";
				$(".title").click(function() {
				
				//	初学写法				
				
					$.ajax({
						type: "post",          //据提交方式,可用GET
						url: url,              //提交地址
						async: false,          //加载方式默认异步,true为同步
						dataType: 'JSON',      //返回数据类型
						data : {},            //这里可以向请求路径携带数据传送 格式如：  startDate :startTime,

						success:function(data) {

							console.log(data);//当你不清楚返回数据结构时,可以将数据打印在控制台查看,方便了解返回的json解数据结构
					
//							写法一:在容器内添加标签以达到数据渲染的效果
//							if(data != null) {    //判断数据是否为空
//								for(var i = 0; i < data.length;i++) {//for循环遍历数据
//									$("<h1>" + data[i].post_title +"</h1>" + 
//									"<h3>" +data[i].id + "</h3>" + 
//									"<p>" + data[i].post_excerpt + "</p>" + 
//									"<img src='" + data[i].thumbnail + "'/>").appendTo(".title");//将数据追加到.title容器里面
//									i = i + 1;
//								}
//							}else{
	                                //无数据
//                                  }

//=========================================================================================================================

//							写法二:这种是针对局部数据的更改,要注意的是新的数据直接替换掉原始内容
							var str = '';//定义一个原始空变量，它将承载你获取的新数据
							if(data != null) {
								for(var i = 0; i < data.length;i++) {
									//单纯替换内容（不带标签）
									str+=data[i].post_title;
									//将原始数据替换为带标签的内容
                                     str+="<p>"+data[i].id+"、"+data[i].post_title+"</p>";
                                     document.getElementById("title").innerHTML = str;//将获取到的新数据赋值到id为title的容器里面
									i = i + 1;
								}
							}else{
								//无数据
							}
						}
					});
				})
})
		</script>

进阶写法：

$(document).ready(function() {
				var url = "http://www.lan-xiong.net/portal/test/index";
				$(".title").click(function() {
					//这种写法要对ajax有一定的了解,熟悉其中参数的写法：
                    // 参数1/接口地址, 参数2/等同于 data:{//这里可以向请求路径携带数据传送 格式如：  startDate :startTime,},3/方法function(data) {}等同于success:function(data){}
										$.post(url, null, function(data) {
											console.log(data);//当你不清楚返回数据结构时,可以将数据打印在控制台查看,方便了解返回的json解数据结构
											if(data!= null){
											for(var i = 0; i < data.length;i++) {
												$("<h1>"+data[i].post_title+"</h1>"+"<h3>"+data[i].id+"</h3>"+"<p>"+data[i].post_excerpt+"</p>"+"<img src='"+data[i].thumbnail+"'/>").appendTo(".title");
												i = i + 1;
											}}else{//无数据}
										}, "json");
					})
			})

进阶写法的for循环里面的内容也可以像上面初学写法那样写，至于怎么写，只要能正常运行，你开心就好！
案例仅供参考，如您有更好的方法，我也希望你能和我分享一下，大家共同学习共同进步！！！