当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery中ajax获取数据赋值给页面的实例

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

2018年02月05日  | 移动技术网IT编程  | 我要评论

实例如下所示：

//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获取数据赋值给页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网