jQuery中Ajax快捷方法之$.get()

本节演示

提问

$.get()方法用于一个HTTP GET请求从服务器加载数据,书写格式如下

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

url 类型: String 一个包含发送请求的URL字符串
data类型: PlainObject, String发送给服务器的字符串或Key/value键值对
success(data)类型: Function()当请求成功后执行的回调函数
dataType类型: String从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）

本节课程例子

//通过绑定一次点击事件来获得数据
$("button").one("click",function(){
$.get("http://cdn.gbtags.com/gblibraryassets/libid102/jsondata.jsp",
function(data){
for(var i=0;i<4;i++){
$.each(data[i],function(key,value){
var t=$("<td></td>").text(value);
$("tr").eq(i+1).append(t);
});
}
}, "json");
});

当我们点击按钮之后出发一个一次性的Ajax请求,$.get()方法是Ajax请求的快捷方法之一,以下是我们请求的json数据格式,数据中每一段数据存在数组格式中

[{
"Name" : "terry lee",
"RollNo" : 1,
"Mark" : "80"
},
{
"Name" : "Jack lee",
"RollNo" : 2,
"Mark" : "70"
},
{
"Name" : "Paul lee",
"RollNo" : 3,
"Mark" : "90"
},
{
"Name" : "Mary lee",
"RollNo" : 4,
"Mark" : "75"
}]

我们可以看到一共有四段数据在其中,所以我们使用for循环来在外部遍历4次，每一段数据中有三条数据,我们使用$.each()方法来进行每一段数据的遍历,将每一条数据插入到表格中

<!-- HTML代码片段中请勿添加<body>标签 //-->
<button>点击获取服务器端数据</button>
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>编号</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>


<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

/*CSS源代码*/
button{
  display:block;
  padding:8px 10px;
  line-height:1.4;
  text-align:center;
  cursor:pointer;
  border-radius:4px;
  border:1px solid transparent;
  color:#fff;
  background:#1aba9c;
  font-size:15px;
}
table{
  display:none;
}
.table{
  display:inline-block;
  border-collapse:collapse; 
  margin:10px auto;
}
td, th{ 
  border:1px solid #356;
  padding:5px;
  color:#456;
}

/*Javascript代码片段*/
$(function(){
  //通过绑定一次点击事件来获得数据
  $("button").one("click",function(){
    $("table").addClass("table");
    $.get("http://cdn.gbtags.com/gblibraryassets/libid102/jsondata.jsp",
     function(data){
       for(var i=0;i<4;i++){
         $.each(data[i],function(key,value){
           var t=$("<td></td>").text(value);
           $("tr").eq(i+1).append(t);    
         });
                            
       } 
 
     }, "json");
  
  });
});