Javascript 什么';这是使用jQuery&;让这些ajaxget请求的最佳方式;JSON API?

Javascript 什么';这是使用jQuery&;让这些ajaxget请求的最佳方式;JSON API?,javascript,jquery,json,ajax,api,Javascript,Jquery,Json,Ajax,Api,我在来自不同端点URL的不同页面上输出API数据,即https://api.server.com/first,https://api.server.com/second等 代码正在运行,但它似乎非常冗余,我相信有更好的方式来表达这一点,它更优化、更快: var $rubys = $('#rubys'); $(function () { $('#loading-rubys').show(); $.ajax({ type: 'GET', url: 'http

我在来自不同端点URL的不同页面上输出API数据,即
https://api.server.com/first
https://api.server.com/second

代码正在运行,但它似乎非常冗余,我相信有更好的方式来表达这一点,它更优化、更快:

var $rubys = $('#rubys');

$(function () {
   $('#loading-rubys').show();
   $.ajax({
       type: 'GET',
       url: 'https://api.server.com/first/',
       success: function(rubys) {
           $.each(rubys, function(i, ruby) {

$rubys.append('$'+parseFloat(ruby.price).toFixed(2)+' | 
$'+parseFloat(ruby.attribute).toFixed(0));
           });
       },
       complete: function(){
       $('#loading-rubys').hide();
       }
   })
});    

var $emeralds = $('#emeralds');

$(function () {
   $('#loading-emeralds').show();
   $.ajax({
       type: 'GET',
       url: 'https://api.server.com/second/',
       success: function(emeralds) {
           $.each(emeralds, function(i, emerald) {

$emeralds.append('$'+parseFloat(emerald.price).toFixed(2)+' | 
$'+parseFloat(emerald.attribute).toFixed(0));
           });
       },
       complete: function(){
       $('#loading-emeralds').hide();
       }
   })
});   
以下是:

var $rubys = $('#rubys');
$('#loading-rubys').show();
使用YAML front matter(Jekyll)为每个帖子页面设置如下:

并以HTML格式输出:

 <div id="{{ page.var-id }}">   
 <div id="{{ page.load-id }}">
     <img src="/assets/img/loading.svg"/>
 </div>
 </div>

当前工作流

因此,基本上每当我创建一个新帖子时,我:

  • 为前面的每个帖子设置
    var id
    load id
    自定义参数

  • 创建一个新函数来包含这些内容,并对相应的url发出新的GET请求,即
    https://api.server.com/third/
    https://api.server.com/fourth/


你如何才能写得更好?

类似的东西可能会有所帮助

function getGems(gems,gemsURL) {
var $gems = $('#'+gems);
$('#loading-'+gems).show();
   $.ajax({
       type: 'GET',
       url: gemsURL,
       success: function(data) {
           $.each(data, function(i, v) {
               $gems.append('$'+parseFloat(v.price).toFixed(2)+' | 
               $'+parseFloat(v.attribute).toFixed(0));
           });
       },
       complete: function(){
       $('#loading-'+gems).hide();
       }
   });
}
$(function () {
    getGems('rubys','https://api.server.com/first/');
    getGems('emeralds','https://api.server.com/second/')
});

像这样的问题在stackoverflow这里是离题的。你应该考虑问是的,它是完美的!完全按照预期工作。今天学到了很多,再次感谢@PeterDarmis。
function getGems(gems,gemsURL) {
var $gems = $('#'+gems);
$('#loading-'+gems).show();
   $.ajax({
       type: 'GET',
       url: gemsURL,
       success: function(data) {
           $.each(data, function(i, v) {
               $gems.append('$'+parseFloat(v.price).toFixed(2)+' | 
               $'+parseFloat(v.attribute).toFixed(0));
           });
       },
       complete: function(){
       $('#loading-'+gems).hide();
       }
   });
}
$(function () {
    getGems('rubys','https://api.server.com/first/');
    getGems('emeralds','https://api.server.com/second/')
});