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代码位于Blade模板中包含asset的外部文件中，路径变得杂乱无章。但我想这更容易解决。

有没有其他方法可以在那里加载那个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的优雅方式

2 个答案: