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"); }); });