如何让ajax只请求一次就行了

怎么让ajax只请求一次就行了




<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<style>

body{

	background:#B4B4B4;

	}

li{

	list-style:none;

	}

.btn{

	width:70px;

	height:30px;

	line-height:30px;

	text-align:center;

	float:left;

	background:#FFF;

	color:#333;

	margin:10px;

	cursor:pointer;

	}

.div,#ul1,#ul1 li{

	float:left;

	}

#ul1 a{

	width:70px;

	height:30px;

	display:inline-block;

	line-height:30px;

	text-align:center;

	background:#FFF;

	color:#333;

	text-decoration:none;

}

#ul1 a.active{

	background:#00BCF3;

	color:#FFF;

	}

</style>

<script type="text/javascript">

$(document).ready(function(){

	$(".btn").click(function(){

		$.ajax({

		type:'get',

		url:'getNews.php',

		dataType:'json',

		success:function(d){

			var html='';

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

				html+='<li><a href="javascript:;">'+d[i].title+'</a>[<span>'+d[i].date+'</span>]</li>'

				}

			$("#ul1").html(html);

			$("#ul1 a:first").addClass('active');

			$("#ul1 a").on('click',function(){	

				$("#ul1 a").removeClass("active");

				$(this).addClass('active');

				$(".btn").html($(this).html());

				$("#ul1").hide();

				$(".btn").show();

			})

			}

		})

		$(".btn").hide();

		$("#ul1").show();

	})

});

</script>

</head>


<body>

<div class="div">

	<a class="btn">替换1</a>

    <ul id="ul1" style="display:none;"></ul>

</div>

</body>

</html>

请问下我想要的效果是
1、点击第一次a标签的时候  获取后端数据并且前台显示已经完成了后面点击a标签的时候就不再请求ajax了
2、当我后面再次点击a标签的是我希望active能添加在上一次点击当前$("#ul1 a")里面

------解决方案--------------------
$(".btn").click(function(){
if($(this).data("html") != ""){
$(this).html($(this).data("html"))
}else{
        $.ajax({
        type:'get',
        url:'getNews.php',
        dataType:'json',
        success:function(d){
            var html='';
            for(var i=0; i<d.length;i++){
                html+='<li><a href="javascript:;">'+d[i].title+'</a>[<span>'+d[i].date+'</span>]</li>'
                }
            $("#ul1").html(html);
$(this).data("html",html)
}

        })
            $("#ul1 a:first").addClass('active');
            $("#ul1 a").on('click',function(){
                $("#ul1 a").removeClass("active");
                $(this).addClass('active');
                $(".btn").html($(this).html());
                $("#ul1").hide();
                $(".btn").show();
            })
            }
        $(".btn").hide();
        $("#ul1").show();
    })

大致是思路是把取的内容存起来，下次直接使用

如何让ajax只请求一次就行了

相关推荐