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

Question

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

我现在的做法是通过 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 的 Blade 模板中包含的外部文件中，路径变得一团糟。但我想这更容易解决。

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

Answer 1

你可以尝试在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);

Answer 2

在控制器中

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

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

Elegant way to load an AJAX data to a div

jquery

ajax

laravel

blade