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

Posted 奔跑的葛根

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中Ajax快捷方法之$.get()相关的知识，希望对你有一定的参考价值。

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

 本节演示

 
提问
 

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

  1. 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）
本节课程例子

 

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

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

 

  1. [{
  2. "Name" : "terry lee",
  3. "RollNo" : 1,
  4. "Mark" : "80"
  5. },
  6. {
  7. "Name" : "Jack lee",
  8. "RollNo" : 2,
  9. "Mark" : "70"
  10. },
  11. {
  12. "Name" : "Paul lee",
  13. "RollNo" : 3,
  14. "Mark" : "90"
  15. },
  16. {
  17. "Name" : "Mary lee",
  18. "RollNo" : 4,
  19. "Mark" : "75"
  20. }]

 

我们可以看到一共有四段数据在其中,所以我们使用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");
  
  });
});

 

以上是关于jQuery中Ajax快捷方法之$.get()的主要内容，如果未能解决你的问题，请参考以下文章

深入理解jQuery中的ajax

第111天：Ajax之jQuery实现方法

jQuery之Ajax应用

jquery 之ajax,get,post异步请求简单代码模版

django之jquery完成ajax

django之使用jquery完成ajax