웹 프론트엔드 JS 튜토리얼 jQuery에서 ajax를 사용하여 데이터 할당을 추출하는 방법

jQuery에서 ajax를 사용하여 데이터 할당을 추출하는 방법

Mar 15, 2018 pm 01:09 PM
ajax jquery 데이터

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

회전판 광고 이미지를 구현하기 위한 HTML+CSS+jQuery

html+css+jquery로 바닥 스크롤 효과 얻기

jquery로 페이징 효과를 만드는 방법

위 내용은 jQuery에서 ajax를 사용하여 데이터 할당을 추출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

ddrescue를 사용하여 Linux에서 데이터 복구 ddrescue를 사용하여 Linux에서 데이터 복구 Mar 20, 2024 pm 01:37 PM

ddrescue를 사용하여 Linux에서 데이터 복구

오픈 소스! ZoeDepth를 넘어! DepthFM: 빠르고 정확한 단안 깊이 추정! 오픈 소스! ZoeDepth를 넘어! DepthFM: 빠르고 정확한 단안 깊이 추정! Apr 03, 2024 pm 12:04 PM

오픈 소스! ZoeDepth를 넘어! DepthFM: 빠르고 정확한 단안 깊이 추정!

초지능의 생명력이 깨어난다! 하지만 자동 업데이트 AI가 등장하면서 엄마들은 더 이상 데이터 병목 현상을 걱정할 필요가 없습니다. 초지능의 생명력이 깨어난다! 하지만 자동 업데이트 AI가 등장하면서 엄마들은 더 이상 데이터 병목 현상을 걱정할 필요가 없습니다. Apr 29, 2024 pm 06:55 PM

초지능의 생명력이 깨어난다! 하지만 자동 업데이트 AI가 등장하면서 엄마들은 더 이상 데이터 병목 현상을 걱정할 필요가 없습니다.

Google은 열광하고 있습니다. JAX 성능이 Pytorch와 TensorFlow를 능가합니다! GPU 추론 훈련을 위한 가장 빠른 선택이 될 수 있습니다. Google은 열광하고 있습니다. JAX 성능이 Pytorch와 TensorFlow를 능가합니다! GPU 추론 훈련을 위한 가장 빠른 선택이 될 수 있습니다. Apr 01, 2024 pm 07:46 PM

Google은 열광하고 있습니다. JAX 성능이 Pytorch와 TensorFlow를 능가합니다! GPU 추론 훈련을 위한 가장 빠른 선택이 될 수 있습니다.

iPhone의 느린 셀룰러 데이터 인터넷 속도: 수정 사항 iPhone의 느린 셀룰러 데이터 인터넷 속도: 수정 사항 May 03, 2024 pm 09:01 PM

iPhone의 느린 셀룰러 데이터 인터넷 속도: 수정 사항

미 공군이 주목할만한 최초의 AI 전투기를 선보였습니다! 전 과정에 걸쳐 장관이 직접 간섭 없이 테스트를 진행했고, 10만 줄의 코드를 21차례 테스트했다. 미 공군이 주목할만한 최초의 AI 전투기를 선보였습니다! 전 과정에 걸쳐 장관이 직접 간섭 없이 테스트를 진행했고, 10만 줄의 코드를 21차례 테스트했다. May 07, 2024 pm 05:00 PM

미 공군이 주목할만한 최초의 AI 전투기를 선보였습니다! 전 과정에 걸쳐 장관이 직접 간섭 없이 테스트를 진행했고, 10만 줄의 코드를 21차례 테스트했다.

다섯 개의 유연한 손가락과 초인적인 속도를 갖춘 인간 작업을 자율적으로 완료하는 최초의 로봇 등장, 가상 공간 훈련을 지원하는 대형 모델 다섯 개의 유연한 손가락과 초인적인 속도를 갖춘 인간 작업을 자율적으로 완료하는 최초의 로봇 등장, 가상 공간 훈련을 지원하는 대형 모델 Mar 11, 2024 pm 12:10 PM

다섯 개의 유연한 손가락과 초인적인 속도를 갖춘 인간 작업을 자율적으로 완료하는 최초의 로봇 등장, 가상 공간 훈련을 지원하는 대형 모델

대형 모델을 이해하는 Alibaba 7B 다중 모드 문서, 새로운 SOTA 획득 대형 모델을 이해하는 Alibaba 7B 다중 모드 문서, 새로운 SOTA 획득 Apr 02, 2024 am 11:31 AM

대형 모델을 이해하는 Alibaba 7B 다중 모드 문서, 새로운 SOTA 획득

See all articles