json 데이터 받아서 탭에보여주기

테스트용 json데이터

news_api.txt

 <div class="content-section">

        <div>

          <div>

            <div>

              <div class="news-nav-slide">

                <ul>

                  <li class="act"><a href="#"  onclick="abc('tab01');"><span>라이언일보</span><img src="/news1.png" /></a></li>

                  <li><a href="#"  onclick="abc('tab02');"><span>라이언일보1</span><img src="/news2.png" /></a></li>

                  <li><a href="#"  onclick="abc('tab03');"><span>라이언일보2</span><img src="/news3.png" /></a></li>

                  <li><a href="#"  onclick="abc('tab04');"><span>라이언일보3</span><img src="/news4.png" /></a></li>

                  <li><a href="#"  onclick="abc('tab05');"><span>라이언일보4</span><img src="/news5.png" /></a></li>

                </ul>

              </div>

              

              <div class="news-tab-con" id="news-tab-con">

                   //json데이터에 따라 다르게 보여질 부분

              </div>

              

            </div>

          </div>

        </div>

      </div>

---

  $(document).ready(function () {

   

    abc("tab01");  //페이지 열자마자 기본으로 보여줄 것 검색

  

  });

    

function abc(tab_id){

  

    var tab = tab_id;

    var url = "";

    if(tab == "tab01"){

    url = "/news_api.txt";

    }else if(tab == "tab02"){

    ....                                //필요한 값 넣음

    }

    $.ajax({

type:'POST',

url:url,

dataType:'json',

contentType: "application/x-www-form-urlencoded; charset=euc-kr",     //이건 한글데이터 깨져보여서 넣음

beforeSend : function(jqXHR){

jqXHR.overrideMimeType('application/x-www-form-urlencoded; charset=euc-kr');    //이건 한글데이터 깨져보여서 넣음

},

success:function(data){

var name = new Array();

var type = new Array();

var title = new Array();

var newsurl = new Array();

var cre_date = new Array();

var journalist = new Array();

var content = new Array();

var imageurl = new Array();

var html=[],h=-1;

for (var i=0; i<data.length; i++){

name[i] = data[i].name.toString();

type[i] = data[i].type.toString(); 

title[i] = data[i].title.toString(); 

newsurl[i] = data[i].newsurl.toString();

cre_date[i] = data[i].cre_date.toString(); 

journalist[i] = data[i].journalist.toString(); 

content[i] = data[i].content.toString(); 

imageurl[i] = data[i].imageurl.toString(); 

}//for

html[++h] = '<div class="news-tab-con">';

html[++h] = '<div class="news-thum-list">';

html[++h] = ' <ul>';

html[++h] = '   <li>';

html[++h] = '      <a href="'+newsurl[0]+'" target="_blank">';

          ....................                                    //보여줄 화면에 데이터 넣음

                html[++h] = '   </div>';

                html[++h] = '  </div>';

                $('div.news-tab-con').html(html.join(""));   // 보냄. (.html로 하니까  css까지 적용됨)

},

error : function(xhr, status, error) {

  

                       alert("에러발생 ::::::::   code:"+xhr.status+"\n"+"message:"+xhr.responseText+"\n"+"error:"+error);

          }

});

    //  return false;

      }//function

---

json데이터 받아와서 가공해서 필요한 곳에 화면 뿌려주는 것 까진 나름 쉽게 했는데.

계속 막혀있는 부분이 뭐냐면.. 

탭을 눌러서 새 데이터를 받아올 때 마다 화면이 새로 고침이 된다.

나는 탭만 . 탭안에 데이터만 변경되었으면 하는데..