AJAX 호출에서 데이터를 HTML로 출력

Question

버튼을 누를 때 기사 목록에 AJAX를 사용하여 기사를 추가하고 있습니다. 그래서 내 AJAX 호출은 제목, 저자 및 기사와 관련된 1-3 개의 이미지를 포함하는 데이터를 반환합니다. 아래는 내가 그것을 출력하는 데 사용하는 코드입니다,하지만 그것은 매우 clunky 느낀다.

JavaScript/jQuery를 사용하여 HTML을 인쇄 할 때 유용한 정보 (예 : 새로운 정보가 포함 된 많은 새 태그를 추가해야하는 경우)는 무엇입니까? 도와 주셔서 감사합니다!

또한 코드의 일부는 잘 작성된 것이 아니기 때문에 처음으로 초안을 작성 했으므로 HTML 인쇄 나 HTML 인쇄 작업과 관련하여이 질문에 답하십시오 쉽게

$j.getJSON(ajaxurl, {action: 'load_articles', issues: $issues}, function(data) { 
    if (data.message != null) { 
     alert(data.message); 
     return 
    } 
    list = $j('.all-articles ul'); 
    for (i in data.articles) { 
     article = data.articles[i]; 
     //Hides articles already on page 
     if ($j("#" + article.id).size() === 0) { 
      list.append('<li class="article-preview" id="' + article.id + '">' + 
        '<h3 class="article-headline">' + article.title + '</h3>' + 
        '</li>'); 
      current = $j("#" + article.id) 
      current.append('<p class="authors"></p>'); 
      authors = $j("#" + article.id + " .authors") 
      for (a in article.authors) { 
       authors.append(article.authors[a].data.display_name + " "); 
      } 
      current.append('<div class="images"></div>'); 
      images = $j("#" + article.id + " .images") 
      for (i in article.image) { 
       text = "<div class='image-expand-container'>"; 
       if (i == 0) { 
        text += ('<img id="' + article.image[i].id + '"class="selected" src="' + article.image[i].medium + '"></img>'); 
       } 
       else { 
        text += ('<img id="' + article.image[i].id + '" src="' + article.image[i].medium + '"></img>'); 
       } 
       text += '<div class="dashicons dashicons-editor-expand"></div></div>'; 
       images.append(text); 
      } 
     } 
    } 

Answer 1

취할 수있는 방법이 몇 가지 있습니다. 당신이하고있는 것처럼

1. , 당신은 (예를 들어, JSON 등) 아약스 호출에서 데이터를 반환하고 문자열을 구축하여 해당 HTML을 생성하는 자바 스크립트 기능을 사용할 수 있습니다. 당신이 발견 하듯이 이것은 종종 지저분합니다.
2. 서버 측에서 실제 HTML을 생성 할 수 있으며 ajax 호출에서 HTML 조각을 반환하여 DOM에 삽입 할 수 있습니다. 이렇게하면 페이지가로드 될 때 HTML이로드되고 ajax를 통해로드되는 일부 HTML (PHP, XSLT, ASP.NET Razor, 모든 종류의 서버 측 템플릿)을 사용할 수 있다는 이점이 있습니다. 모든 HTML을 생성합니다.
3. javascript templating 프레임 워크를 사용하여 JSON 데이터를 HTML로 변환 할 수 있습니다. 모든 HTML이 자바 스크립트 (예 : 단일 페이지 응용 프로그램)를 통해 생성되는 경우 이것이 최선의 방법 일 수 있습니다.