ajax+jquery实现简单的数据交互

今天有人问我前端是如何数据交互的，在我刚开始接触的一段时间里面，我也很迷惑 经常听别人说，感觉很高大上，现在回过头来 也就那么一回事，废话不多说  现在我们来看看前端数据交互 这里我们采用jquery的ajax  还有json数据

1.建立一个web工程 demo-ajax



2.导入jquery  至于版本1.7以上的就行了  看你喜好

3.建立一个模拟数据failLoad.json

{
"list":[
{
"dire":"职务","age":"年龄","name":"姓名"
},
{
"dire":"学生","age":"18","name":"小明"
},
{
"dire":"老师","age":"28","name":"老王"
},
{
"dire":"教务主任","age":"28","name":"老李"
},
{
"dire":"院长","age":"38","name":"老张"
}
]

}



4.在index.html中写入js

$.ajax({

            type:"get",

            url:"js/failLoad.json",

            dataType:"json",

            success:function(data){

              var html = "<ul>";
             $.each(data.list,function(i,n){
          html +="<li>"
          +"<span>"
          +n["dire"]
          +"</span>"
          +"<span>"
          +n["age"]
          +"</span>"
          +"<span>"
          +n["name"]
          +"</span>"
          +"</li>";
             })

              html +="</ul>";

              $("#div").append(html);

            },

            error:function(){

                alert("加载资源失败");

            }

        })





最后效果



点滴的积累便是进步的源泉