Max—— 前端攻城狮 's Blog

A Simple pure blog generated by jekyll

Jquery ajax实例

<< Back

Jquery ajax实例

下面是页面的Html结构

     <body>
<div>点击按钮获取JSON数据</div>
<input type="button" id="button" value="确定" />
<div id="result"></div>   
</body>

     

下面是ajax代码

$(function(){
     $('#button').click(function(){
          $.ajax({
               type:"GET",
               url:"music.txt",
               dataType:"json",
               success:function(data){
                    var music="<ul>";
                    //i表示在data中的索引位置,n表示包含的信息的对象
                    $.each(data,function(i,n){
                         //获取对象中属性为optionsValue的值                   
                         music+="<li>"+n["optionValue"]+"</li>";
                    });
                    music+="</ul>";
                    $('#result').append(music);
               }
          });
          return false;
     });
});
     

参考实现AJAX的基本步骤

发表于: 07 Apr 2013