使用 jQuery 和 JSON API 发出这些 AJAX GET 请求的最佳方式是什么？

debugcn 发表于 Dev

船运

我在来自不同端点 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) 为每个帖子页面设置，如下所示：

---
title: Post about Ruby
var-id: rubys
load-id: loading-rubys
---

并以 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/.

你会怎么写这个更好？

用户2560539

像这样的事情可能会有所帮助。

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/')
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。