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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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 fread()使用技巧
2010/01/22 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
深入学习jQuery Validate表单验证
2016/01/18 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
学习Django知识点分享
2019/09/11 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
监理员的岗位职责
2013/11/13 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
母亲节感恩寄语
2014/02/21 职场文书
土地转让协议书
2014/04/15 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
起诉意见书范文
2015/05/19 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫