javascript - 如何向API链接添加动态变量?

标签 javascript jquery html ajax

我面临一个问题,我想通过向其传递变量来使我的 API 链接成为动态的。我的API是:http://api.fixer.io/latest?symbols=SGD,MYR 现在我想要最后两个值,即 SGD 和 MYR 作为我输入的输入字段中的动态变量。那么如何做到这一点呢? 这是我的完整代码。

$(function(){
   $('button').on('click' , function(){
      var val1 = document.getElementById('value1').value;
      var val2 = document.getElementById('value2').value;

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

      $.ajax({
	       type: 'GET' ,
               url: "http://api.fixer.io/latest?symbols="+val2+","+val1,  //value are not coming to the link 
               success: function(data) 
               {
                   console.log(val1);      // values are coming here
	           console.log(val2);     // values are coming here
         	   var rate1 = data.rates.val1 ;
        	   var rate2 = data.rates.val2 ;
        	   var final = rate1/rate2 ;
        	   $('#records').html ('Total Rate for Above Currency is :  ' + final ) ;
               }
            });
        });
   });
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body align="center"><br/><br/><br/>
<h1> Welcome Currency Convertor </h1> <br/><br/>
Local CCY : <input type="text" id="value1"> <br/><br/>
Hotel CCY : <input type="text" id="value2"> <br/><br/>
<button> Show rate </button> <br/><br/>
<div id="records"> </div>
</body>
</html>

帮帮我。提前致谢。

最佳答案

试试这个:

$(function() {
  $('button').on('click', function() {
    var val1 = document.getElementById('value1').value;
    var val2 = document.getElementById('value2').value;
    var $records = $('#records');
    var composedUrl = "http://api.fixer.io/latest?symbols=" + val1 + "," + val2;

    console.log(composedUrl);

    $.ajax({
      type: 'GET',
      url: composedUrl,
      success: function(data) {

        var rate1 = data.rates[val1];
        var rate2 = data.rates[val2];

        console.log(rate1);
        var final = rate1 / rate2;
        $('#records').html('Total Rate for Above Currency is :  ' + final);
      }
    });
  });
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body align="center"><br/><br/><br/>
  <h1> Welcome Currency Convertor </h1> <br/><br/> Local CCY : <input type="text" id="value1"> <br/><br/> Hotel CCY : <input type="text" id="value2"> <br/><br/>
  <button> Show rate </button> <br/><br/>
  <div id="records"> </div>
</body>

</html>

关于javascript - 如何向API链接添加动态变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42953530/

相关文章:

javascript - Javascript 中 for 循环内的 setInterval

javascript - 为什么在这个 JavaScript 动画中,某些元素会去到奇怪的地方?

javascript - 纯js使用ajax加载html和js,但js不起作用

css - 如何更改此聊天框的边框,使其看起来像附图中的那样

jQuery Div 旋转?

html - 更改窗口/div 滚动条的设计

javascript - 如何在 Truffle 中配置不同的轮询间隔?

javascript - 使用ajax重定向后php session 丢失

javascript - 如何在 React JS 的下拉列表中设置值?

javascript - Chrome 自动移动焦点