gpt4 book ai didi

javascript - 在 Ajax 结果后多次打印一个 div

转载 作者:行者123 更新时间:2023-11-30 06:20:00 25 4
gpt4 key购买 nike

我正在研究 laravel,我有一个 HTML block ,如下所示

<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 block ,在问题的开头给出,并在 h4 标签和追加 block 中添加标题每个标题的正文。
console.log 的输出:

title1
title2
title3
title4

注意:使用 foreach 遍历 jquery 很容易,但我对 HTML block 部分感到困惑。

最佳答案

你可以创建一个渲染器函数来避免像这样重复代码

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

关于javascript - 在 Ajax 结果后多次打印一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53790840/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com