AJAX GET 请求 - URL 显示未定义

Question

我正在制作一个 WordPress 插件，并使用酒店 api。我只是想测试它并使其显示 API 中的国家/地区列表。

我面临的错误是，它显示 URL 为未定义，如下所示 - undefined/content-api/1.0/countries，它也会给出 404 错误。

这就是我获取凭据的方式 - 通过表单上的用户输入

    $api_key = esc_attr(get_option('api_key'));
    $secret_key = esc_attr(get_option('secret_key'));
    $endpoint_url = esc_attr(get_option('endpoint_url'));
    // Calculate the MD5 hash of the secret key
    $api_signature = md5($secret_key);

  <tr valign="top">
       <th scope="row">Endpoint URL:</th>
       <td><input type="text" name="endpoint_url" value="<?php echo $endpoint_url; ?>" /><td>
  </tr>

这是获取国家/地区并显示它们的代码。

// Get All Countries button click event
            $('#get-all-countries-button').click(function() {
                var endpointUrl = $('#endpoint_url').val();
                var apiKey = $('#api_key').val();
                var secretKey = $('#secret_key').val();

                // Perform an API request to retrieve all countries
                console.log("Retrieving All Countries...");
                $.ajax({
                    url: endpointUrl + '/content-api/1.0/countries', // Construct the correct API URL
                    type: 'GET',
                    dataType: 'json', // Parse the response as JSON
                    headers: {
                        'APIKey': apiKey,
                        'Signature': '<?php echo $api_signature; ?>', // Use the MD5 hash of the secret key
                        'Content-Type': 'application/json'
                    },
                    success: function(response) {
                        // Display the list of countries
                        if (response.IsSuccess && response.Content.length > 0) {
                            var countries = response.Content.map(function(country) {
                                return country.Name;
                            });
                            $('#all-countries-result').html('<p>' + countries.join(', ') + '</p>');
                            console.log("All Countries Retrieved", response);
                        } else {
                            $('#all-countries-result').html('<p>No countries available.</p>');
                            console.error("No Countries Available");
                        }
                    },
                    error: function(xhr) {
                        // Display an error message
                        $('#all-countries-result').html('<p>Failed to retrieve countries.</p>');
                        console.error("Failed to Retrieve Countries", xhr);
                    }
                });
            });

Answer 1

我只是想让您知道您还没有为您的输入提供 ID。你能像这样在你的输入中添加 id 属性吗？

<tr valign="top">
           <th scope="row">Endpoint URL:</th>
           <td><input type="text" name="endpoint_url" id="endpoint_url" value="<?php echo $endpoint_url; ?>" /><td>
      </tr>