ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-03-18 08:01:34  阅读:202  来源: 互联网

标签:function name getJSON var 获取数据 ajax 11Jquery kyhtml data


 

 

 

 

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

 

标签:function,name,getJSON,var,获取数据,ajax,11Jquery,kyhtml,data
来源: https://www.cnblogs.com/xinxihua/p/14553204.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有