вернуть HTML / JSON с обычной JS-функцией, содержащей вызов JQuery AJAX? - PullRequest
0 голосов
/ 04 марта 2011

Я знаю, что это «технически» невозможно, поскольку AJAX является асинхронным, но в приложении, над которым я работаю, много вызовов AJAX API, и я пытаюсь сделать его расширяемым для будущих разработчиков переднего плана.

Я знаю, что вы можете просто вкладывать все в обратные вызовы, но это было бы ужасно, не говоря уже о том, что следующий разработчик, желающий расширить его, не будет знать, что делать.

Так, например, вот мой код (который, конечно , не работает и просто возвращает undefined, но здесь приведен пример того, как я хотел бы, чтобы он работал логически ):

var getCategories = function(type){
  var categories;
  $.get('/api/categories/all',function(json){
    if(type == 'html'){
      categories = '';
      for(x in json.data){
        categories=categories+'<option id="category_'+json.data[x].category_id+'" title="'+json.data[x].description+'">'+json.data[x].category+'</option>'
      }
    }
    else{ //JSON
      categories = json.data;
    }
    return categories;
  });
}

И позже разработчик может захотеть использовать его следующим образом: $('div').html('<select>'+getCategories('html')+'</select>');

Как я мог заставить эту работу так работать? Могу ли я использовать какой-нибудь трюк с JS или каждая функция, которую я создаю, должна иметь такой обратный вызов, как getCategories('html',function(){})?

Если все это требует обратного вызова, есть ли у вас какие-либо советы по созданию в основном приложения JS с большим количеством легко расширяемых вызовов AJAX?

UPDATE

В соответствии с запросом, для разработчика было бы неприятно, если бы он захотел что-то сделать, скажем, с тегами, категориями и сообщениями:

//Some event on click
$('.button').click(function(){
  $.ajax({
    url: "/api/categories/all",
    success: function(json){
      categories = '';
      for(x in json.data){
        categories=categories+'<option id="category_'+json.data[x].category_id+'" title="'+json.data[x].description+'">'+json.data[x].category+'</option>'
      }
      $.ajax({
        url: "/api/tags/all",
        success: function(json){
          tags = '';
          for(x in json.data){
            tags=tags+'<option id="tags_'+json.data[x].category_id+'" title="'+json.data[x].description+'">'+json.data[x].category+'</option>'
          }
          $.ajax({
            url: "/api/posts/all",
            success: function(json){
              posts = '';
              for(x in json.data){
                posts=posts+'<option id="posts_'+json.data[x].category_id+'" title="'+json.data[x].description+'">'+json.data[x].category+'</option>'
              }

              //And so on...
              //after getting all this data that the developer might want
              //to put this in a modal to edit these items...
            }
          });
        }
      });
    }
  });
});
//On load tho, on the same page, he might want to list "popular" categories, tags, all, and he'd
//have to copy and paste the above code but change, all to popular
//Im looking to make a JS API almost to make this simpler, LIKE:
var tags = goGet('tags','popular');
var categories = gotGet('categoties','all');
//etc

1 Ответ

1 голос
/ 04 марта 2011

По поводу ваших примеров.

В вашем коде три ajax-запроса, и ни один из них не зависит друг от друга.Таким образом, нет причин выполнять их последовательно.

Что касается goGet, он также может легко выполнять обратный вызов.

goGet('tags','popular', function(tags) {
    // do something with tags
});

Если вы хотите выполнить код после загрузки всех данных, вы можетеиспользуйте счетчик внутри.

var tags, categories;
var completed = 0;
goGet('tags','popular', function(entities) {
    tags = entities;
    completed++;
    if (++completed == NUMBER_OF_REQUESTS) {
        // execute your code
    }
});
goGet('categories','popular', function(entities) {
    tags = entities;
    completed++;
    if (++completed == NUMBER_OF_REQUESTS) {
        // execute your code
    }
});

Вы можете обобщить эту функцию обратного вызова, чтобы не объявлять ее несколько раз.

Немного проще: извлекать данные последовательно.

goGet('tags','popular', function(tags) {
    goGet('categories','popular', function(categories) {
        // execute your code
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...