將AJAX數據加載到div的優雅方式

我的應用程序中有很多情況需要在外部加載一些數據。將AJAX數據加載到div的優雅方式

現在做的方法是通過AJAX加載數據，將其返回到JS文件，然後使用$().html()（或類似的）函數。

這會導致JavaScript代碼中出現大量雜亂的html代碼。

$('.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>");

像這樣。我嘗試使用$（）。load（）在外部加載它，但這裏有兩個問題：

首先，我不知道如何使所有信息正確放置在它的位置。

第二 - 我正在使用Laravel和Blade。 jQuery代碼位於刀片模板中包含的外部文件中，其中asset和路徑都很混亂。但我認爲這很容易解決。

是否有任何其他方式來加載該HTML，而不是隻是把它全部在我需要的每個JavaScript函數？

來源

2017-09-19 Maximilian Berbechelov

什麼你到目前爲止已經試過？ –

我從來沒有試過，但我看不出爲什麼你不能將你的局部刀片模板暴露給控制器，然後使用'$（）。load（）'加載它們。這確實意味着有人可以（理論上）在瀏覽器中導航到你的部分內容，但也許這不值得擔心。 – arbuthnott

顯示您的ajax代碼，控制器代碼，html代碼，這將幫助我們解決您的問題 –

您可以通過在js文件寫入HTML模板文件的HTML代碼和js嘗試

在模板

<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>

在JS代碼：

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

來源

2017-09-19 11:13:12 Bharti

在控制器

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

partialview.blade.php

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

，並在您的Ajax代碼

$.ajax({ 

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

來源

2017-09-19 12:09:39

回答

相關問題