Elegante Möglichkeit, AJAX-Daten in ein div zu laden

Question

Ich habe viele Situationen in meiner App, wo ich einige Daten extern laden muss.

Tun Sie es jetzt, indem Sie die Daten über AJAX laden, es in die JS-Datei zurückgeben und dann $().html() (oder ähnliche) -Funktion verwenden.

Dies führt zu vielen unordentlichen HTML-Code in den JavaScript-Code.

$('.articles-container').append("<div class='item article_entree' id='"+ article.article_id +"'><input type='checkbox'></input><div class='title'>"+ article.title +"</div><br class='clear' /><div class='country'>"+ article.country_code +"</div><div class='date'>"+ article.d_published +"</div><br class='clear' /><div class='divider'></div></div>"); 

So. Ich versuchte es extern laden mit $(). Load(), aber es gibt zwei Probleme dort:

Erstens, ich weiß nicht heiß, um es so zu machen, dass alle Informationen richtig auf seinen Platz gebracht wird.

Zweitens - ich benutze Laravel und Blade. Der jQuery-Code befindet sich in einer externen Datei, die in der Blade-Vorlage mit asset enthalten ist und die Pfade gehen alle unordentlich. Aber ich nehme an, das ist einfacher zu beheben.

Gibt es eine andere Möglichkeit, diese HTML-Datei dort zu laden, anstatt sie einfach in jede JavaScript-Funktion zu füllen, die ich brauche?

Answer 1

Sie durch Schreiben von HTML-Code in HTML-Template-Datei und js in js Datei versuchen

In Template

<div class='item article_entree' id=''> 
    <input type='checkbox'></input> 
    <div class='title'></div> 
    <br class='clear' /> 
    <div class='country'></div> 
    <div class='date'></div> 
    <br class='clear' /> 
    <div class='divider'></div> 
</div> 

In JS Code:

$('.article_entree').prop('id', article.article_id); 
$('.title').html('id', article.title); 
$('.country').html('id', article.country_code); 
$('.date').html('id', article.d_published); 

Answer 2

in Controller

public function yourFunction($id) { 
    $article = Article::find($id); 
    return view('partialview',compact('article')); 
    } 

in partialview.blade.php

<div> 
    {{$article->id}} 
//your html 
</div> 
<sript> 
// load your external scirpts here 
</script> 

und in Ihren Ajax-Code

$.ajax({ 

     'url' : 'path/to/yourFunction', 
     'type' : 'GET', 
     'data' : { 
     }, 
     'success' : function(data) { 
      $('.articles-container').html(data); 
      }, 
     'error' : function(request,error) 
     { 
     } 
    });