Ajax分别追加数组数据 [英] Ajax append array data individually
问题描述
我有Ajax返回的数据数组，我想在面板中一个接一个地显示它们，目前它们同时在一个面板中，我希望这些数据有多个步骤.
代码
HTML
< div class ="panel-body">< div class ="answerPanel"></div></div> 脚本
$.ajax({类型:"GET"，url:'{{url('dashboard/getQuizzes')}}/'+ projectId，beforeSend:function(data){console.log("click-发送前的ajax"，数据)；}，成功:功能(数据){$(data.quizzes).each(function(_，i){$('.answerPanel').append(i.question);});}}); 此 $('.answerPanel').append(i.question); 在我的视图中一起返回所有数据，我也尝试过
问题
我的问题是如何使用此数据制作多步面板?
我要寻找的是首页上的
你好吗?fg(基于我的屏幕截图)，然后单击下一步"按钮并获得uid等...
我知道这个问题似乎很愚蠢，但是在放弃投票之前请尝试提供帮助:)
可以尝试下面的代码
< script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>< body id ="banner">< ul id ="eventCal"></ul>< button id ="clicks"> Click</button>< script type ="text/javascript">jQuery(document).ready(function($){var quizzes = [{title:'title1'，choices:[{title:'choice1'}，{title:'choice2'}]}}，{title:'title2'，choices:[{title:'new1'}，{title:'new2'}]}，{title:'title3'，choices:[{title:'demo1'}，{title:'demo2'}]}]]；var index = 0;console.log(quizzes.length)$(#clicks").click(function(){if(typeof quizzes [index]！='undefined'){var html ='< li&s; span>'+ quizzes [index] .title +'</span</li>';if(quizzes [index] .choices.length> 0){html + ='< li class ="choises">';;quizzes [index] .choices.forEach((element，index，array)=> {//console.log(element.title);html + ='< ul>';;html + ='< li>< span>'+ element.title +'</span></li>';html + ='</ul>';});html + ='</li>';;}$(#eventCal").html(html);索引++;}if(quizzes.length ===索引)$(#clicks").html(完成");})});</script></body> I have array of data returning by Ajax and I want to show them one by one in panel, currently they are all in one panel at the same time, I wish to have multiple step of this data.
Code
HTML
<div class="panel-body">
<div class="answerPanel"></div>
</div>
Script
$.ajax({
type:'GET',
url:'{{url('dashboard/getQuizzes')}}/'+projectId,
beforeSend: function(data) {
console.log("click - ajax before send", data);
},
success:function(data){
$(data.quizzes).each(function(_, i){
$('.answerPanel').append(i.question);
});
}
});
this $('.answerPanel').append(i.question); is returning all data together in my view, I also tried this answer the only difference was it had brake line with it :)
Result
Question
My question is how can I make multi step panel with this data?
What I'm looking for is having
how are you?fg(based on my screenshot) in first page then I click next button and getuidand so on...
I'm aware this question might seem silly but please try to help before giving down vote :)
Can you try the below code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="banner">
<ul id="eventCal">
</ul>
<button id="clicks">Click</button>
<script type="text/javascript">
jQuery(document).ready(function($){
var quizzes = [{title:'title1',choices:[{title:'choice1'},{title:'choice2'}]},
{title:'title2',choices:[{title:'new1'},{title:'new2'}]},
{title:'title3',choices:[{title:'demo1'},{title:'demo2'}]}];
var index = 0;
console.log(quizzes.length)
$("#clicks").click(function(){
if(typeof quizzes[index] != 'undefined'){
var html = '<li><span>'+quizzes[index].title+'</span></li>';
if(quizzes[index].choices.length > 0){
html+='<li class="choises">';
quizzes[index].choices.forEach((element, index, array) => {
//console.log(element.title);
html+='<ul>';
html+='<li><span>'+element.title+'</span></li>';
html+='</ul>';
});
html+='</li>';
}
$("#eventCal").html(html);
index++;
}
if(quizzes.length === index)
$("#clicks").html("Finish");
})
});
</script>
</body>
这篇关于Ajax分别追加数组数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
