https://www.w3school.com.cn/jquery/jquery_ref_dom_element_methods.asp
jQuery 參考手冊 - DOM 元素方法
【jQuery】使用getJSON()方法異步加載JSON格式數據
使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務器中的數組，並對獲取的數據進行解析，顯示在頁面中，它的調用格式為：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url參數為請求加載json格式文件的服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。
例如，點擊頁面中的“加載”按鈕，調用getJSON()方法獲取服務器中JSON格式文件中的數據，並遍歷數據，將指定的字段名內容顯示在頁面中。如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當點擊“加載”按鈕時，通過getJSON()方法調用服務器中的sport.json文件，獲取返回的data文件數據，並遍歷該數據對象，以data[“name”]取出數據中指定的內容，顯示在頁面中。
有幾個地方不好理解：
function(data)是getJSON()方法的回調函數，也就是說執行了getJSON()方法后它就會執行，這里的data就是由getJSON方法從服務器地址取的數據，不需要定義。至於sport的話，你可以參考一下jQuery中each()函數的用法：
1
2
$(selector).each(function(index,element))
在這個例子中就相當於$.each(data,function(index,sport))
index就是取到的數據在數組中的位置，element就是具體的數據對象，sport作為function的參數，實際傳入的是data數組中第index個對象，即data[index]，是一個json對象，所以sport["name"]就是這個json對象中的name對應的值。
————————————————
版權聲明：本文為CSDN博主「badlyForPapers」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/happyhaojie/article/details/50348359
實例講述了jQuery使用getJSON方法獲取json數據。分享給大家供大家參考，具體如下：
demo.js：
[
{
"name"
:
"吳者然"
,
"sex"
:
"男"
,
"email"
:
"demo1@123.com"
},
{
"name"
:
"吳中者"
,
"sex"
:
"男"
,
"email"
:
"demo2@123.com"
},
{
"name"
:
"何開"
,
"sex"
:
"女"
,
"email"
:
"demo3@123.com"
}
]
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>getJSON獲取數據 jQuery使用getJSON方法獲取json數據 </title>
<script type=
"text/javascript"
src=
"js/jquery-1.10.1.min.js"
></script>
<style type=
"text/css"
>
#divframe {
border: 1px solid
#999;
width: 500px;
margin: 0 auto;
}
.loadTitle {
background:
#CCC;
height: 30px;
}
</style>
<script type=
"text/javascript"
>
$(
function
(){
$(
"#btn"
).click(
function
(){
$.getJSON(
"js/demo.js"
,
function
(data){
var
$jsontip = $(
"#jsonTip"
);
var
strHtml =
"123"
;
//存儲數據的變量
$jsontip.empty();
//清空內容
$.each(data,
function
(infoIndex,info){
strHtml +=
"姓名："
+info[
"name"
]+
"<br>"
;
strHtml +=
"性別："
+info[
"sex"
]+
"<br>"
;
strHtml +=
"郵箱："
+info[
"email"
]+
"<br>"
;
strHtml +=
"<hr>"
})
$jsontip.html(strHtml);
//顯示處理后的數據
})
})
})
</script>
</head>
<body>
<div id=
"divframe"
>
<div class=
"loadTitle"
>
<input type=
"button"
value=
"獲取數據"
id=
"btn"
/>
</div>
<div id=
"jsonTip"
> </div>
</div>
</body>
</html>
// jQuery url get parameters function [獲取URL的GET參數值]
jQuery獲取URL的GET參數值
// <code>
// var GET = $.urlGet(); //獲取URL的Get參數
// var id = GET['id']; //取得id的值
// </code>
// url get parameters
// public
// return array()
(function($) {
$.extend({
urlGet:function()
{
var aQuery = window.location.href.split("?"); //取得Get參數
var aGET = new Array();
if(aQuery.length > 1)
{
var aBuf = aQuery[1].split("&");
for(var i=0, iLoop = aBuf.length; i<iLoop; i++)
{
var aTmp = aBuf[i].split("="); //分離key與Value
aGET[aTmp[0]] = aTmp[1];
}
}
return aGET;
}
})
})(jQuery);
//HTML代碼
<a href="javascript:void(0)" class="cityname" id="{$rr[code]}" name='{$rr[name]}'>{$rr[name]}</a>
//jQuery代碼
<script type="text/javascript">
//地區ajax獲取數據
$(function(){
$(".cityname").click(function(){
var code = $(this).attr("id");
var name = $(this).attr("name");
$('#city_name').html(name);
var course_info ='';
var url="?m=content&c=cityPoster&a=wenduNewsInfos";
$.ajax({
type: "GET",
url: url,
data: {cityId:code},
dataType: "json",
async:false,
success: function(data){
course_info=data.data.posterArrs;//公告返回結果
course_arr=data.data.courseArrs;//課程返回結果
console.log(course_info);
return false;
html = '';
},
});
//課程ajax請求結果賦值
//考研公共課
var data_ggk=course_arr[0];
var kyhtml='';
kyhtml+=' <div class="local_courseLeft">';
if(data_ggk==''){
kyhtml+='<div class="second_interview">';
kyhtml+='<p class="other-choose">您可選擇附近城市的分校課程<br>';
kyhtml+=' 也可以選擇網校，在線學習<a class="enter_official" target="_blank" href="http://www.wenduedu.com/">進入文都網校</a></p>';
kyhtml+=' <p class="official_telphone">400-606-9976</p>';
kyhtml+='</div>';
}else if(data_ggk.length){
var length0=data_ggk.length;
for(var i=0;i< length0;i++){
kyhtml+='<div class="local_courseList">';
kyhtml+='<p class="localCourse_heading"><a href="'+data_ggk[i].url+'" title="'+data_ggk[i].title+'" target="_blank">'+data_ggk[i].title+'</a></p>';
kyhtml+='<div class="localCourse-introduce">';
kyhtml+='<span class="courseIntroduce-title">課程簡介：</span>';
kyhtml+='<a class="localCourse-others localCourse-details" title="'+data_ggk[i].description+'" >'+data_ggk[i].description+'</a>';
kyhtml+='</div>';
kyhtml+='<div class="localCourse-introduce teach-master">';
kyhtml+='<span class="courseIntroduce-title">授課名師：</span>';
kyhtml+='<a class="localCourse-others teacher_Name" title="'+data_ggk[i].teacher+'">'+data_ggk[i].teacher+'</a>';
kyhtml+='</div>';
kyhtml+='<div class="localCourse_Enter">';
kyhtml+='<p class="remian-days">報名剩余'+data_ggk[i].sign_end+'天</p>';
kyhtml+='<a href="'+data_ggk[i].url+'" target="_blank" class="course-consult">報名咨詢</a>';
kyhtml+='</div>';
kyhtml+='</div>';
}
}
kyhtml+='</div>';
//公告
kyhtml+='<div class="localCourse-notice">';
kyhtml+='<h3 class="common-titleModule common-titleModuleWD">';
kyhtml+='<a target="_blank" class="commonTitle_name" href="javascript:void(0)">公告</a><b class="commonTitle-line"></b></h3>';
kyhtml+='<ul class="localCourse-noticeList">';
for(var coursePer in course_info[0]){
kyhtml+='<li><a target="_blank" href="'+course_info[0][coursePer].url+'">'+course_info[0][coursePer].title+'</a></li>';
}
kyhtml += '</ul>';
kyhtml+='</div>';
$('#ggk').html('');
$('#ggk').html(kyhtml);
});
})
</script>
//控制器
$courseArrs = json_decode(trim($courseArrs,chr(239).chr(187).chr(191)),true);
$newData['courseArrs'] = $courseArrs['data'];
echo json_encode(array('state' => 1,'data'=>$newData));die;
————————————————
版權聲明：本文為CSDN博主「jiangnanqbey」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/jiangnanqbey/article/details/78924586