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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现日历效果
Sep 11 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
python生成器generator用法实例分析
2015/06/04 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python如何实现单链表的反转
2020/02/10 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
普通员工辞职信
2014/01/17 职场文书
房地产端午节活动方案
2014/08/24 职场文书
股东授权委托书范本
2014/09/13 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
吃空饷专项整治方案
2014/10/27 职场文书