jQuery中ajax获取数据赋值给页面的实例


Posted in jQuery onDecember 31, 2017

实例如下所示:

//html代码 
<pre name="code" class="html"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="cityname" id="{$rr[code]}" name='{$rr[name]}'>{$rr[name]}</a></pre><br> 
<pre></pre> 
<br> 
<pre name="code" class="php">//控制器代码 
$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;</pre><br> 
<pre name="code" class="html">//ajax代码 
<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/" rel="external nofollow" >进入文都网校</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+'" rel="external nofollow" rel="external nofollow" 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+'" rel="external nofollow" rel="external nofollow" 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)" rel="external nofollow" rel="external nofollow" >公告</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+'" rel="external nofollow" >'+course_info[0][coursePer].title+'</a></li>'; 
     } 
     kyhtml += '</ul>'; 
     kyhtml+='</div>'; 
    $('#ggk').html(''); 
    $('#ggk').html(kyhtml); 
}); 
  }) 
</script></pre><br> 
<br>

以上这篇jQuery中ajax获取数据赋值给页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
详解jquery选择器的原理
Aug 01 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 #jQuery
You might like
php环境无法上传文件的解决方法
2014/04/30 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python difflib模块示例讲解
2017/09/13 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python实现彩票系统
2020/06/28 Python
Python中six模块基础用法
2019/12/08 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
企业党建工作汇报材料
2014/08/19 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
运动会新闻稿
2015/07/17 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
Mysql数据库命令大全
2021/05/26 MySQL
Python 中的Sympy详细使用
2021/08/07 Python