Асинхронный запрос jquery. В чем ошибка?

Question

[vitaliyharchenko]

На сайте есть кнопки, они реализованы списком. Событие клика по ним обрабатывается данным скриптом, расположенным в страницы:

$( "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"
        });         
      });

Обработчик на другом сервере, его код:

<?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;
?>

При этом код не срабатывает и выдается "все плохо"

Если запрос сделать синхронным, то есть оставить:

$.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"
        });

то все работает отлично.

В чем ошибка? И что делать в этой ситуации?

Мне нужно реализовать асинхронное получение ответа от апи по клику на кнопку.

Comments

[alternativshik]

одинаковые запросы, не вижу в них разницы и там и там асинхронный вызов. Но вот в header('Access-Control-Allow-Origin: sportcourts.ru');
у вас домен указан, если не с него запрос - все сломается.

[Евгений Петров]

Нужно выводить не абстрактное «Все плохо», а полученные аргументы. Там же сообщение, что за ошибка.

Answer 1

[Павел Белоусов]

А так?

$(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"
	});

});

Comments

[vitaliyharchenko]

результат: "Все плохо"

но вне $(document).on('click', 'li', function() { ... }
все в порядке, ответ доходит

Answer 2

[s1dney]

Убрав вызов функции ajax из функции клика это не делает его синхронным в привычном понимании "синхронности".
Если функция вообще отрабатывает, и при этом выдает ошибку, то это говорит о том, что ajax выполнил запрос неудачно, что странно. Может быть сразу несколько запросов делаете?
Попробуйте так:

$( "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);
        });
});

Comments

[vitaliyharchenko]

убрал вызов ajax запроса по клику на li

[vitaliyharchenko]

@s1dney

[vitaliyharchenko]

такой способ тоже не работает, на странице только один запрос по клику =\

и такой запрос так же работает, если не вложен в click =\

Answer 3

[Sergey Romanov]

Я думаю проблема в том что вы с одного урл пытаетесь сделать аякс запрос на другой домен. Здесь нужно точно проверить что вы на sportcourts.ru а не на www.sportcourts.ru. Попробуйте

header('Access-Control-Allow-Origin: *');

Comments

[vitaliyharchenko]

тоже не помогает, уже ставил общий доступ

[vitaliyharchenko]

почему-то работа запроса внутри click и вне него различаются

[Евгений Петров]

Если бы проблема была в этом, то у автора ни разу бы не сработало, а он пишет, что при синхронном запросе всё нормально. Правда в коде у него 2 раза асинхрон записан.

[Sergey Romanov]

@Petroveg а да упустил это их виду :)

Answer 4

[vitaliyharchenko]

Проблема, как выяснилось, была в двух вещах:

Во-первых в интерпретации клика по тегу p шаблонизатором (button)

Также была ошибка в установке заголовков на api сервере на питоне. Всем спасибо за помощь =)