如何将 REST API 集成到 HTML 网站？

Question

我观看了无数视频并阅读了大量文档，但我仍然无法将 REST API 集成到我的 HTML 网站。一旦用户点击我网站上的按钮，我想拨打WaitlistAPI。如何将此 API 集成到我的网站？提前感谢您的帮助！

这是 HTML 代码：

<section class="waitlist">
  <form>
    <input type="text" name="email" placeholder="Enter Email" required>
    <button>Join Waitlist</button>
  </form>       
</section>
    

Answer 1

您好，要将您的网站与https://getwaitlist.com/ 集成，您需要使用 Javascript，而要调用 API，您需要 Ajax，并确定要发送的值，在本例中为 waitlist_email。

这里是一个js的例子：

function post(api_url, data, success_callback, fail_callback) {

$.ajax({
    method: 'POST',
    url: api_url,
    data: JSON.stringify(data),
    dataType: 'json',
    contentType: 'application/json',
    success: function(response) {
        success_callback(response);
    },
    error: function(response) {
        fail_callback(response);
    }
});
}

function submit_email_to_waitlist(){
    // fetch values from the frontend
    var new_signup = document.getElementById('waitlist_email').value; //fetch user signing up on frontend
    var current_url = document.URL; //fetch current URL, including potential referral token

    const success_callback = function(response) {
        // fetching responses
        waiter_email = response['registered_email']
        waiter_priority = response['current_priority']
        total_waiters_currently = response['total_waiters_currently']
        referral_link = response['referral_link']

        // hiding parts of HTML
        $('#waitlist_email').hide()
        $('#demo_submit_button').hide()
        $('#email_address_text').hide()

        // showing parts of HTML
        $('#current_text').show()
        $('#current_waiter_spot').show()
        $('#out_of').show()
        $('#all_waiter_spots').show()
        $('#demo_referral').show()

        // appending HTML information
        $('#current_waiter_spot').html(waiter_priority)
        $('#all_waiter_spots').html(total_waiters_currently)
        $('#referral_link_url').html('Your referral link is:' + referral_link)
        $('#info_ref_link').html('Click on the button to copy your referral link (also sent to your email).')
    };

    const fail_callback = function(response) {

        // perform actions based on error codes
        response_code = response['status']
        if (response_code == 422) {
            $('#error_message').html("Invalid value to sign up with.");
        } else if (response_code == 400) {
            $('#error_message').html("Error!");
        }
    };

    post('https://www.getwaitlist.com/waitlist',
        {email: new_signup,
            api_key: 'YOUR API KEY',
            referral_link: current_url
        }, success_callback, fail_callback);
};

这里有一个例子或你的html：

<div class="col form-group">

  <h5 class="h5 pt-1" id="current_text" >You are currently in spot</h5>
  <h5 class="h5 pt-1" id="current_waiter_spot"></h5>
  <h5 class="h5 pt-1" id="out_of">of</h5>
  <h5 class="h5 pt-1" id="all_waiter_spots"></h5>

  <label class="cform-label" for="rf-email" id="email_address_text"> Email address </label>
  <input class="cform-control" type="email" id="waitlist_email" placeholder="Your email" >
  <button class="btn btn-primary btn-block" type="button" id="demo_submit_button" onclick="submit_email_to_waitlist()" > Try the demo </button>

  <p class="font-size-ms text-muted" id="referral_link_url"></p>
  <button class="btn btn-primary btn-block" type="button" id="demo_referral" > Copy referral link </button>

  <p class="font-size-ms text-muted" id="filler"></p>
  <p class="font-size-ms text-muted" id="info_ref_link"></p>
  <p class="font-size-ms text-muted" id="error_message"></p>

</div>

在这里您可以查看一个很好的工作示例：https://getwaitlist.com/templates