Невозможно запросить HTML-контент с AJAX localhost

Question

Я пытаюсь встроить HTML-код в элемент div с помощью Ajax. (также мы делаем с iframe). Во-первых, я проверяю это на локальном хосте, чтобы избежать проблем с политикой одинакового происхождения.

Веб-приложение работает на сервере Wamp.

Есть 2 файла:

Скрипт с Ajax-запросом (index.html):

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
 <body>

 <div id="testajax" style="width: 500px;height: 300px;border: 1px solid red;top:120px;
position:relative;">

 </div>

 <script type="text/javascript">
 $.ajax({
    type: 'POST',
    url: 'http://localhost/site.php',
    dataType: 'text/html; charset=utf-8',
    success: function(response) {
            $('#testajax').html(response);
    }
 });
 </script>

 </body>
</html>

Файл с HTML-кодом, который я собираюсь получить (site.php):

<?php 
header('Access-Control-Allow-Origin: *');
header("content-type:text/html; charset=utf-8");
?>
<!DOCTYPE html>
<html>
<head></head>
<body>
 <div id="header">This is a header</div>
 <div id="main">
 <div id="content">This is my main content.</div>
 <div id="sidebar">This is a sidebar</div>
 </div>
 <div id="footer">This is my footer</div>
</body>
</html>

В браузере нет ошибок журнала или сети ... поэтому я не вижу, что не так в этом сценарии. Почему успех Ajax никогда не выполняется?

javascript php jquery ajax

0

another 28 Авг 2017 в 13:12

Answer 1

Я долго тестировал это, потому что у меня не было ошибок на консоли разработчика или в профилировщике сети.

Поскольку реальный код очень большой, я сделал фрагмент, чтобы задать вопрос, и этот фрагмент фактически не содержит ошибок.

Так что в моем реальном коде нет jQuery, включенного в файл, который я использовал с помощью функции Ajax. Фактически он был внедрен в элемент <head> в другом файле PHP.

Кроме того, я не получал ошибку в журналах, потому что у меня было дополнение FireBug, и это в настоящее время Legacy :), и не работает хорошо.

Ссылка: FireFox.

1

another 29 Авг 2017 в 11:12

Answer 2

Как насчет упрощения вещей?

  $(document).ready(function() {
       $('#testajax').load('http://localhost/site.php', function() {
          alert('Load was performed.');
       });
    });

1

Fabio Marzocca 28 Авг 2017 в 10:18

Answer 3

Вы должны повторить HTML. Ваш php-файл ничего не отправляет клиенту.

<?php 
header('Access-Control-Allow-Origin: *');
header("content-type:text/html; charset=utf-8");

echo '<div id="header">This is a header</div><div id="main"><div id="content">This is my main content.</div><div id="sidebar">This is a sidebar</div></div><div id="footer">This is my footer</div>';

?>

0

Dinesh undefined 28 Авг 2017 в 10:15

Answer 4

Просто напишите, что вы используете jQuery 3, это может быть вашей проблемой

Уведомление об устаревании: jqXHR.success (), jqXHR.error () и jqXHR. Обратные вызовы complete () удалены с jQuery 3.0. Вместо этого вы можете использовать jqXHR.done (), jqXHR.fail () и jqXHR.always ().

Если это не сработает, я бы:

Удалите лишние теги doctype, html, head, body (поскольку браузер или jQuery могут не понравиться).
Затем добавьте console.log (ответ); к вашему успеху / выполненная функция

1

fjoe 28 Авг 2017 в 10:31

Невозможно запросить HTML-контент с AJAX localhost

4 ответа

Похожие вопросы

Новые вопросы

javascript