设计:一个AJAX调用或多个AJAX调用以获取详细信息列表

时间:2015-05-06 07:20:11

标签: javascript jquery ajax json

我有一个用例,我想获取卡片详细信息,我有2个REST API

/user/{id}/getCards // gives list of cards for that user

在Back-end中它是如何工作的,我打电话给一个给我cardId列表的服务,然后我再次调用每个cardId获取卡片详细信息,并在json响应中返回cardDetails列表。 / p>

/user/{id}/getCard/{cardId} // gives one card's detail with cardId for that user

在后端这是它的工作原理,我调用第二个服务传递cardId和json响应仅包含一张卡的详细信息。

鉴于我在页面加载时已经有了CardIds,最好的方法是什么。

方法1 :只进行一次通话并获取所有卡片并立即在用户界面中显示。这将导致我在后端进行2次呼叫。

方法2 :迭代javascript并逐个进行多个AJAX调用(可以完成异步)并逐个获取卡片详细信息并在UI中显示。如果任何通话失败怎么办。

2 个答案:

答案 0 :(得分:1)

我认为/user/{id}/getCards应该允许将一系列过滤器传递给它并返回一个匹配过滤器的对象数组。这是一种标准方法,在REST中完全可以。

不需要单独发出请求,因为这对客户端来说非常慢,并且可能导致服务器负载过重。我认为不需要一个接一个地获取实体,所以无效。

答案 1 :(得分:0)

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<input type="text">

<input type="text">

<input type="button" onclick="fetchprofiledetails()">

<input list="browsers" id="datadyna">
<datalist id="browsers">

</datalist>

<script>
function fetchprofiledetails(){
$.ajax({
 url:'data.json',
 success:function(response){
  var x= {};
  x=response;
    alert(x.widget);
 }
})
} 
$(document).ready(function(){
  var x= {};
$('#datadyna').on('keyup',function(){
 if($('#datadyna').val().length >= 4){
    $.ajax({
     url:'data.json',
     success:function(response){

 x = JSON.parse(response);
 var option ='';

  $.each(x.widget.window, function(i, field){
            //$("div").append(field + " ");
            option = option + '<option value='+  field+'>'
        });

    //option = option + '<option value='+ x.widget.window[i] +'>'

 $('#browsers').append(option);
    //alert(x.widget.window.title);
 }
})
 }
});
});


</script>