如何使用 Ajax 比较来自两个不同来源的结果


How can I compare results from two different sources using Ajax?

我在网站上有一个小的货币兑换功能,它工作正常,但今天我被要求添加注册最佳汇率的可能性,从那时起能够检索它并将其与今天的汇率进行比较。

因此,原始函数的代码片段如下(其中exchangepair由用户设置 - 例如"USDEUR"):

<script type="text/jscript">
    function doexchange(exchangepair) {
        $.ajax({
            url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22'+exchangepair+'%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=',
            success: function(response) {
                successCallback(response);
            },
            error: function(response) {
                //Error display
            }
        });
    }
    function successCallback(responseObj){
        var stringObj = JSON.stringify(responseObj),
            exchange = JSON && JSON.parse(stringObj) || $.parseJSON(stringObj),
            exchangerate = exchange.query.results.rate.Rate;
        //Do stuff with the exchange rate
    }
</script>

所有这些都完美地工作。因此,我继续创建更多代码,每当用户单击"更新"按钮时,这些代码都会将今天的汇率注册为最佳汇率。我将其注册在XML文件中,因为它是目前最实用的解决方案。

所以现在我需要读取文件并解析数据,并与每日汇率数据进行比较......这就是我碰壁的地方。为了读取XML文件,我需要一个AJAX调用,并且我不能有两个单独的函数和两个单独的AJAX调用。因此,理想的做法是使用通用 AJAX 调用创建一个泛型函数,并在每种情况下更改变量......但问题是我需要同时获取两组数据并进行比较。我需要从雅虎货币获取当天的汇率,并从该XML中获取最佳记录汇率,然后比较两者,以便能够告诉用户最佳汇率是否需要更新为今天的汇率。

到目前为止,我已经在这个超过5个小时了,我的头快要爆炸了。我已经忘记了我一直在做什么,看不到摆脱这种混乱的任何出路。

值得一提的是,这是我需要的第二个 AJAX 函数:

<script type="text/jscript">
    function getbestexchange(exchangepair) {
        $.ajax({
            type: "GET" ,
            url: "best"+exchangepair+".xml" ,
            dataType: "xml" ,
            success: function(xml) {
                bestrate = $(xml).find('rate').text();
            }
        });
    });
</script>

因此,我需要的是将最后一个函数通过bestrate变量传递的结果数据与通过exchangerate变量传递的第一个successCallback()函数的结果数据进行比较。

如果有人能帮我一把,帮助我摆脱必须从这两个地方获取数据然后比较它们的问题,我将非常有义务!

编辑:根据@guest271314的贡献和评论,我创建了一个jsfiddle来向你们展示我在哪里。我已经继续进行@guest271314建议的更改,但仍然无法使其正常工作;它在 XML 文件的.ajax()调用时继续失败。但是,XML 文件已启动并正在运行。

function doexchange(exchangepair) {
  // added `return`
  return $.ajax({
    url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22' + exchangepair + '%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback='
  }).then(successCallback);
}
function successCallback(responseObj) {
  var stringObj = JSON.stringify(responseObj),
    exchange = JSON && JSON.parse(stringObj) || $.parseJSON(stringObj),
    exchangepair = exchange.query.results.rate.id,
    exchangerate = parseFloat(exchange.query.results.rate.Rate).toFixed(2),
    exchangedate = exchange.query.results.rate.Date;
  $('#todaysrate').find('.pair').html(exchangepair);
  $('#todaysrate').find('.rate').html(exchangerate);
  $('#todaysrate').find('.date').html(exchangedate);
  // added `return`
  return exchangerate
}
function getbestexchange(exchangepair) {
  // added `return`
  return $.ajax({
    type: "GET",
    url: "http://chiennuperou.com/besthistoric" + exchangepair + ".xml",
    dataType: "xml"
  }).then(function(xml) {
    alert('Hey, I''m working!');
    bestpair = $(xml).find('pair').text();
    bestrate = $(xml).find('rate').text();
    bestdate = $(xml).find('date').text();
    $('#bestrate').find('.pair').html(bestpair);
    $('#bestrate').find('.rate').html(bestrate);
    $('#bestrate').find('.date').html(bestdate);
    // added `return`
    return bestrate
  });
};
$.when(doexchange( /* value */ ), getbestexchange( /* value */ ))
  .then(function(exc, bestexc) {
    // do comparision stuff
    console.log(exc[0], bestexc[0])
  }, function err(jqxhr, textStatus, errorThrown) {
    $('#error').html(errorThrown);
    console.log(errorThrown)
  })
$('#refresh').click(function() {
  $('#todaysrate').find('.pair').html('. . .');
  $('#todaysrate').find('.rate').html('. . .');
  $('#todaysrate').find('.date').html('. . .');
  $('#bestrate').find('.pair').html('. . .');
  $('#bestrate').find('.rate').html('. . .');
  $('#bestrate').find('.date').html('. . .');
  $('#error').html('');
  doexchange('USDEUR');
  getbestexchange('USDEUR');
})
var exchangepair;
doexchange('USDEUR');
getbestexchange('USDEUR');
span {
  font-weight: bold;
  color: #f00;
}
#refresh {
  display: inline-block;
  color: white;
  background: gray;
  padding: 5px 7px;
  margin-top: 10px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="todaysrate">Today's rate (<span class="date"></span>) for <span class="pair"></span> is 1.00/<span class="rate"></span>
</div>
<div id="bestrate">Best rate (<span class="date"></span>) for <span class="pair"></span> is 1.00/<span class="rate"></span>
</div>
<div id="error">
</div>
<div id="refresh">
  Refresh
</div>

https://jsfiddle.net/48n0u4gv/17/

你可以

尝试使用$.when()

function doexchange(exchangepair) {
    // added `return`
    return $.ajax({
        url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22'+exchangepair+'%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback='
    }).then(successCallback);
}
function successCallback(responseObj){
    var stringObj = JSON.stringify(responseObj),
        exchange = JSON && JSON.parse(stringObj) || $.parseJSON(stringObj),
        exchangerate = exchange.query.results.rate.Rate;
    //Do stuff with the exchange rate
    // added `return`
    return exchangerate
}
function getbestexchange(exchangepair) {
    // added `return`
    return $.ajax({
        type: "GET" ,
        url: "best"+exchangepair+".xml" ,
        dataType: "xml"
    }).then(function(xml) {
         bestrate = $(xml).find('rate').text();
         // added `return`
         return bestrate
    });
};
$.when(doexchange(/* value */), getbestexchange(alue/* v */))
.then(function(exc, bestexc) {
  // do comparision stuff
  console.log(exc[0], bestexc[0])
}, function err(jqxhr, textStatus, errorThrown) {
      console.log(errorThrown)
})

乍一看,我发现我会失去错误处理 原始功能。

function err() {}.then() 应该处理被拒绝的 jQuery 承诺返回作为参数传递给$.when()

// do asynchronous stuff
function failOrSucceed(t, type) {
  return $.Deferred(function(d) {  
    setTimeout(function() {    
      d[type](type === "reject" 
              ? new Error(type + "ed jQuery promise") 
              : type + "d jQuery promise")
    })
  }, t).then(function(result) {  
    return result
  })
}
$.when(failOrSucceed(1000, "reject"), failOrSucceed(900, "resolve"))
.then(function(a, b) {
  console.log(a, b)
}
// handle error, rejected promise returned from `$.when()`
, function err(e) {
  console.log(e)
});
$.when(failOrSucceed(2000, "resolve"), failOrSucceed(2100, "resolve"))
.then(function(a, b) {
  // do stuff with resolved promise values
  console.log(a, b)
}
// handle error, rejected promise returned from `$.when()`
, function err(e) {
  console.log(e)
})
<script src="https://code.jquery.com/jquery-git.js"></script>

JSFIDDLE https://jsfiddle.net/4denw07e/