The request to the Instagram API from the body of the page does not pass. How to fix?

Question

JavaScript

For learning purposes, I decided to make a simple web application that works with the Instagram API. The bottom line is this: by clicking on the button, an ajax request is made to the API and photos are displayed. I registered in Instagram itself, connected the application.
Here is the code trying to get at least something from the API:

var config = {};
config.Beget = {
    apiKey: 'xxx', // Здесь реальные данные из панели разработчика Instagram 
    clientID: 'xxx', // Здесь реальные данные из панели разработчика Instagram 
    apiHost: 'https://api.instagram.com/'
  };
$('.submit').click( // submit - класс кнопки-тригера
function getData() {
    var tag = 'snow';  // Определил здесь тег, по которому будет идти поиск, в целях упрощения дебага.
    var url = config.Beget.apiHost + 'v1/tags/' + tag + '/media/recent?access_token=' + config.Beget.apiKey; 
      $.ajax({
        dataType: 'jsonp',
        cache: false,
        url: url,
         headers: {
        'Access-Control-Allow-Origin': '*'
         },
        success: function(result) {document.write('REQUEST SENT: ' +result.data[0].type)},
        error: function(){console.log('Error!');}
      });
  }
);
  });

So, if I enter this code in the console, then everything is in order, success is executed.
If I just launch the site and click on the button, nothing happens.
The Network tab in Google Chrome shows the following:

What can it be and how can it be overcome? Thanks in advance.

Answer 1

I don't see you turning off the standard form submit via event.preventDefault();

Answer 2

As soon as I removed the input and button from the form tag, everything fell into place. In any case, the cause of the problem is of interest.