javascript - 从 api 访问数据

Question

这是我第一次尝试从 API 访问数据到前端。我正在使用 PHP/ajax，但我不知道如何将前端 (html) 上显示的数据获取到我的网页。

因此，当我选择模式时，我希望从 OpenExchangeRate 获取的货币信息出现在我的“货币”标题旁边。

    $('#ratesBtn').click(function() {
    
            $.ajax({
                url: "php/OpenExchangeRates.php",
                type: 'POST',
                dataType: 'json',
                data: {
                    rates: $('#Crency').val(),
                    
                },
                success: function(result) {
    
                    console.log(JSON.stringify(result));
    
                    if (result.status.name == "ok") {
    
            
                        $('#Crency').html(result['data'][0]['rates']);
                        }
                
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // your error code
                    console.log(errorThrown);
                    
                    
                }
            }); 
        
        });

<?php

    // remove for production

    ini_set('display_errors', 'On');
    error_reporting(E_ALL);

    $executionStartTime = microtime(true);

    $app_id = 'NOT SHOWING FOR SECURITY REASONS';
    $url='https://openexchangerates.org/api/latest.json?app_id=' . $app_id;
    
    

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_URL,$url);

    $result=curl_exec($ch);

    curl_close($ch);

    $decode = json_decode($result,true);    

    $output['status']['code'] = "200";
    $output['status']['name'] = "ok";
    $output['status']['description'] = "success";
    $output['status']['returnedIn'] = intval((microtime(true) -       $executionStartTime) * 1000) . " ms";
    $output['data'] = $decode['rates'];
    
    header('Content-Type: application/json; charset=UTF-8');

    echo json_encode($output); 

?>

        <div class="modal" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title">Information</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <h5>Country:</h5><p id="Countryname"></p>
                  <h5>Capital City:</h5><p id="capCity"></p>
                  <h5>Weather:</h5><p id="Wther"></p>
                  <h5>Currency:</h5><p id="Crency"></p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

标签： javascriptapi