Jquery用ajax获取数据赋值给页面

最新推荐文章于 2026-04-01 02:33:18 发布

原创最新推荐文章于 2026-04-01 02:33:18 发布 · 5.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#php

这篇博客展示了如何使用jQuery的AJAX方法从PHP获取数据，并将这些数据动态地更新到HTML页面上。当点击具有特定类的链接时，会触发一个函数，通过AJAX发送GET请求，然后在成功接收响应后更新页面元素。

//HTML代码
<a href="javascript:void(0)" class="cityname" id="{$rr[code]}" name='{$rr[name]}'>{$rr[name]}</a>

//jQuery代码
<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/">进入文都网校</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+'" 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+'" 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)">公告</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+'">'+course_info[0][coursePer].title+'</a></li>'; 
                  }
                  kyhtml += '</ul>';
                  kyhtml+='</div>';
              $('#ggk').html(''); 
              $('#ggk').html(kyhtml); 
          });
      })
    </script>

//控制器
$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;