将 AJAX 数据加载到 div 的优雅方式答案

【问题标题】：Elegant way to load an AJAX data to a div将 AJAX 数据加载到 div 的优雅方式
【发布时间】：2018-02-28 03:20:48
【问题描述】：

我的应用中有很多情况需要从外部加载一些数据。

我现在的做法是通过 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 代码位于 Blade 模板中包含的外部文件中，带有 asset 并且路径变得混乱。但我想这更容易解决。

有没有其他方法可以在那里加载该 html 而不是将其全部倒入我需要的每个 javascript 函数中？

【问题讨论】：

到目前为止你尝试了什么？
我从未尝试过，但我不明白为什么您不能将部分刀片模板公开给控制器，然后使用$().load() 加载它们。这确实意味着有人可以（理论上）在他们的浏览器中导航到您的部分，但也许这不值得担心。
显示您的ajax代码、控制器代码、html代码，这将帮助我们解决您的问题

标签： jquery ajax laravel blade

【解决方案1】：

在控制器中

  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)
        {
        }
    });

【讨论】：

【解决方案2】：

可以尝试在html模板文件中编写html代码，在js文件中编写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);

【讨论】：