ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryでajaxを使用してデータ割り当てを抽出する方法

jQueryでajaxを使用してデータ割り当てを抽出する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-15 13:09:311906ブラウズ

今回は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=&#39;{$rr[name]}&#39;>{$rr[name]}</a>

 
 

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

 
//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+=' <p class="local_courseLeft">'; 
    if(data_ggk==''){  
     kyhtml+='<p 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+='</p>';  
    }else if(data_ggk.length){ 
    var length0=data_ggk.length; 
    for(var i=0;i< length0;i++){ 
     kyhtml+=&#39;<p class="local_courseList">'; 
     kyhtml+='<p class="localCourse_heading"><a href="&#39;+data_ggk[i].url+&#39;" rel="external nofollow" rel="external nofollow" title="&#39;+data_ggk[i].title+&#39;" target="_blank">'+data_ggk[i].title+'</a></p>'; 
     kyhtml+='<p class="localCourse-introduce">'; 
     kyhtml+='<span class="courseIntroduce-title">课程简介:</span>'; 
     kyhtml+='<a class="localCourse-others localCourse-details" title="&#39;+data_ggk[i].description+&#39;" >'+data_ggk[i].description+'</a>'; 
     kyhtml+='</p>'; 
     kyhtml+='<p class="localCourse-introduce teach-master">'; 
     kyhtml+='<span class="courseIntroduce-title">授课名师:</span>'; 
     kyhtml+='<a class="localCourse-others teacher_Name" title="&#39;+data_ggk[i].teacher+&#39;">'+data_ggk[i].teacher+'</a>'; 
     kyhtml+='</p>'; 
     kyhtml+='<p class="localCourse_Enter">'; 
     kyhtml+='<p class="remian-days">报名剩余'+data_ggk[i].sign_end+'天</p>'; 
     kyhtml+='<a href="&#39;+data_ggk[i].url+&#39;" rel="external nofollow" rel="external nofollow" target="_blank" class="course-consult">报名咨询</a>'; 
     kyhtml+='</p>'; 
     kyhtml+='</p>'; 
     } 
    } 
    kyhtml+='</p>'; 
    //公告 
     kyhtml+='<p 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="&#39;+course_info[0][coursePer].url+&#39;" rel="external nofollow" >'+course_info[0][coursePer].title+'</a></li>'; 
     } 
     kyhtml += '</ul>'; 
     kyhtml+='</p>'; 
    $('#ggk').html(''); 
    $('#ggk').html(kyhtml); 
}); 
  }) 
</script>

 

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTML+CSS+jQueryでカルーセル広告画像を実装

html+css+jqueryでフロアスクロール効果を実現

jqueryでページング効果を作成する方法

以上がjQueryでajaxを使用してデータ割り当てを抽出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。