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 Jsonp跨域模拟搜索引擎
Jun 17 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jquery自定义组件实例详解
Dec 31 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
js动态切换图片的方法
2015/01/20 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
在centos7中分布式部署pyspider
2017/05/03 Python
Python递归函数定义与用法示例
2017/06/02 Python
python 上下文管理器使用方法小结
2017/10/10 Python
基于Python List的赋值方法
2018/06/23 Python
python3实现多线程聊天室
2018/12/12 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Django-imagekit的使用详解
2020/07/06 Python
职工运动会邀请函
2014/02/02 职场文书
董事长致辞
2015/07/29 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript