Блог

У меня есть HTML-форма, которая отправляет запрос в API с помощью AJAX. Но я бы не стал оставлять ключ api в файле JS. Итак, я подумал о создании PHP-оболочки, но я в начале, и я не знаю, как я могу это сделать. Можете ли вы дать мне несколько примеров для понимания этого процесса?

У меня есть эта форма, которая перенаправляет на URL:

 <form action="www.mysite.com/subscribe" method="POST" accept-charset="utf-8" id="signup-form" name="signup-form">
                    <div class="form-group">
                        <input type="text" class="form-control" name="name" id="name" placeholder="Nome"/>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="cognome" id="cognome" placeholder="Cognome"/>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Email"//>
                    </div>


                    <?php include('countries.php'); ?>
                    
                    <div class="form-group">
                        <select class="form-control" id="list" name="list">
                            <option value="" disabled="disabled">Seleziona un interesse</option>
                            <option value="aVD3PdrkiaVJhVU9yN9nMQ">lista 3</option>
                            <option value="spd7cktddsPGTgoDuu892f763Q">lista 2</option>
                            <option value="yCQHvcGxKvBFTeoSp892UxZA">lista 1</option>
                        </select>
                    </div>
                    
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="gdpr" id="gdpr" >
                        <label class="form-check-label" for="gdpr">Accetta il gdpr</label>
                    </div>

                    
                    <input type="submit" value="Sign up" id="submit-btn"/>
                    <p id="status"></p>
                </form>
  

И мой JS-файл с вызовом AJAX (пропускаю некоторые элементы)

 $(document).ready(function() {
    $("#signup-form").submit(function(e) {
        console.log('submitting');
      e.preventDefault();

      var $form = $(this),
        url = $form.attr('action');
        url =  'https://sendy.exnovostudio.eu/subscribe';   
        var e = document.getElementById("list");
        var list = e.value;
        

      params = {
        name: $form.find('input[name="name"]').val(),
        email: $form.find('input[name="email"]').val(),
        list: list,
        api_key: <---I WANT HIDE THIS BUT IT DOESN T WORK IF I DELETE
        gdpr  : gdpr,
        boolean: true
      }

      window.message = function(text, color){
          $("#status").css("color", color).text(text);
      }

      $form.find('input').attr("disabled", "disabled");
      message('iscrizione in corso...', 'blue');
  

Как лучше всего использовать ключ api в вызове AJAX?