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动态赋值id与动态取id方法示例
Aug 21 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery实现可以扩展的日历
Dec 01 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
全面了解js中的script标签
2016/07/04 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python ftplib模块使用代码实例
2019/12/31 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Java里面有没有全局变量?为什么?
2015/02/06 面试题
阿尔卡特(中国)的面试题目
2014/08/20 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
机械个人求职信范文
2014/01/24 职场文书
晚会邀请函范文
2014/01/24 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS