我正在开发laravel，我有一个HTML块，它在下面
<div class="white-panel">
<div class="media-body">
<h4 class="media-heading">
<!-- Here comes the title -->
</h4>
</div>
</div>
我有另一个文件index.blade.php，它发出AJAX Jquery请求并获取标题。
function loadTitle() {
$.ajax(
{
url: '{{url}}/get-data',
type: 'get',
datatype: 'json',
data:
{
in: in
}
})
.done(function(data){
data.forEach( function(index) {
console.log(index)
}
}
}
这个AJAX请求运行良好，我可以在控制台中看到标题，我想做的是循环浏览标题并添加问题开头给出的HTML块，并在h4标记中添加标题，并将块附加到每个标题的正文中
控制台日志的输出：
title1
title2
title3
title4
注意：使用foreach循环jquery很容易，但我对HTML块部分感到困惑。
您可以创建一个渲染器函数来避免重复这样的代码
<!doctype html>
<html>
<head>
<title>A page</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function renderTitleHtml(title) {
var html = '';
html += '<div class="white-panel">';
html += '<div class="media-body">';
html += '<h4 class="media-heading">';
html += title;
html += '</h4>';
html += '</div>';
html += '</div>';
return html;
}
function loadTitle() {
$.ajax({
url: '{{url}}/get-data',
type: 'get',
datatype: 'json',
data: { in: in
}
})
.done(function(data) {
//assuming an array of titles is returned
$(data).each(function(index, title) {
var titleEl = $('<div></div>');
titleEl.html(renderTitleHtml(title));
$(body).append(titleEl);
})
}
}
</script>
</body>
</html>