asynchronous jquery request. Where is the mistake?

Question

PHP

The site has buttons, they are implemented as a list. The click event on them is handled by this script located in the page:

$( "li" ).click(function() {
        $.ajax({
          url: 'http://blabla.ru/test.php',
          data: 'user_id=3&game_id=3',
          async: true,
          success: function(responseData, textStatus){
            alert(responseData + textStatus);
          },
          error: function(data){
            alert('Все плохо');
          },
          type: "POST",
          dataType: "text"
        });         
      });

Handler on another server, its code:

<?php
$user_id = $_POST['user_id'];
$game_id = $_POST['game_id'];
header('Access-Control-Allow-Origin: http://sportcourts.ru');
header('Content-type: text/html; charset=utf-8');
echo 'номер игры:'.$game_id.' номер юзера:'.$user_id;
?>

In this case, the code does not work and "everything is bad" is issued.

If the request is made synchronous, that is, leave:

$.ajax({
          url: 'http://blabla.ru/test.php',
          data: 'user_id=3&game_id=3',
          async: true,
          success: function(responseData, textStatus){
            alert(responseData + textStatus);
          },
          error: function(data){
            alert('Все плохо');
          },
          type: "POST",
          dataType: "text"
        });

then everything works fine.

Where is the mistake? And what to do in this situation?

I need to implement an asynchronous response from the api on a button click.

Answer 1

And so?

$(document).on('click', 'li', function() {
  var user_id = 3,
    game_id = 3;
  $.ajax({
    url: 'http://blabla.ru/test.php',
    data: {
      user_id: user_id,
      game_id: game_id
    },
    async: true,
    success: function (responseData, textStatus) {
      alert(responseData + textStatus);
    },
    error: function (data) {
      alert('Все плохо');
    },
    type: "POST",
    dataType: "text"
  });

});

Answer 2

Removing the ajax function call from the click function does not make it synchronous in the usual sense of "synchronism".
If the function works at all, and at the same time gives an error, then this indicates that ajax completed the request unsuccessfully, which is strange. Maybe you are making multiple requests at once?
Try like this:

$( "li" ).click(function() {
        $.ajax({
          url: 'http://blabla.ru/test.php',
          data: 'user_id=3&game_id=3',
          async: true,
          type: "POST",
          dataType: "text"
        }).done(function(response, status) {
        	alert(response + status);
        });
});

Answer 3

I think the problem is that you are trying to make an Ajax request to another domain from one URL. Here you need to check exactly that you are on sportcourts.ru and not on www.sportcourts.ru. Try
header('Access-Control-Allow-Origin: *');

Answer 4

The problem, as it turned out, was in two things:
Firstly, in the interpretation of a click on the p tag by the template engine (button)
There was also an error in setting the headers on the api server in python. Thank you all for your help =)