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"); ???});});jQuery中Ajax快捷方法之$.get()
原文地址：http://www.cnblogs.com/benpaodegegen/p/7648828.html