前端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】使用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

 

前端11Jquery用ajax获取数据赋值给页面

上一篇:CSS的一些基础语法(01)


下一篇:[LeetCode] Find Pivot Index 寻找中枢点