jQuery中ajax获取数据赋值给页面的实例

 更新时间:2017年12月31日 15:28:19   作者:jiangnanqbey  
下面小编就为大家分享一篇jQuery中ajax获取数据赋值给页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

实例如下所示:

//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的Read()方法代替原生JS详解

    jQuery的Read()方法代替原生JS详解

    众所周知在jQuery中ready方法在DOM完全下载后立即执行其中的代码。因为它是等所有的DOM元素都加载完毕,才执行给定的函数,所以你能确定那些试图操作和访问元素节点的方法都能被执行。而这篇文章给大家介绍的是如何用jQuery的Read()方法代替原生JS,下面来一起看看。
    2016-11-11
  • JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    JS中批量给元素绑定事件过程中的相关问题使用闭包解决

    解决元素批量绑定事件的时候,出现i=最后一个循环变量的值的方法有两种:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内
    2013-04-04
  • 使用jquery.qrcode.min.js实现中文转化二维码

    使用jquery.qrcode.min.js实现中文转化二维码

    本文给大家介绍的是一款jQuery的插件jquery.qrcode.min.js,其主要功能是可以生成二维码,而且可以完美支持中文,下面就给小伙伴们介绍下他的用法
    2016-03-03
  • 实现placeholder效果的方案汇总

    实现placeholder效果的方案汇总

    由于placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。
    2015-06-06
  • jQuery绑定点击事件与改变事件的方式总结及多个元素绑定多个事件

    jQuery绑定点击事件与改变事件的方式总结及多个元素绑定多个事件

    我们一说到jQuery中对于元素的修改,就是元素的内容、属性、样式的修改,下面这篇文章主要给大家介绍了关于jQuery绑定点击事件与改变事件的方式总结及多个元素绑定多个事件的相关资料,需要的朋友可以参考下
    2022-12-12
  • Jquery AJAX 用于计算点击率(统计)

    Jquery AJAX 用于计算点击率(统计)

    Jquery AJAX实现页面的统计代码,后台用的是php,这篇文章主要是学习jquery下ajax的简单实现。
    2010-06-06
  • jQuery实现类似老虎机滚动抽奖效果

    jQuery实现类似老虎机滚动抽奖效果

    这篇文章主要介绍了jQuery实现类似老虎机滚动抽奖效果的方法,实例分析了jquery随机数及Ajax调用的相关技巧,需要的朋友可以参考下
    2015-08-08
  • jquery.cvtooltip.js 基于jquery的气泡提示插件

    jquery.cvtooltip.js 基于jquery的气泡提示插件

    显示气泡提示的前提是,一定会有一个被提示的对象,默认的位置是根据body来计算的,这样的坏处就是如果页面内容发生了变化,而气泡的位置没有改变,导致提示目的失败。
    2010-11-11
  • 浅谈jquery设置和获得checkbox选中的问题

    浅谈jquery设置和获得checkbox选中的问题

    下面小编就为大家带来一篇浅谈jquery设置和获得checkbox选中的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jquery 图片轮换效果

    jquery 图片轮换效果

    重写了昨天的图片轮换,加入了自动切换效果,改变了布局,增强了可定制性,当然,还是有点小小的问题,在IE 6+,chrome,firfox3.68下测试正常运行
    2010-07-07

最新评论