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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery AJAX应用实例总结
May 19 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
8个必备的PHP功能实例代码
2013/10/27 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
微信小程序自定义组件
2017/08/16 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python如何求解两数的最大公约数
2018/09/27 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python定时器线程池原理详解
2020/02/26 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
美国折扣网站:jClub
2017/08/07 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
聚美优品的广告词
2014/03/14 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
升职演讲稿范文
2014/05/23 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
有关浪费资源的建议书
2015/09/14 职场文书