前端11Jquery用ajax获取数据赋值给页面
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
