Я пытаюсь встроить 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 никогда не выполняется?
4 ответа
Я долго тестировал это, потому что у меня не было ошибок на консоли разработчика или в профилировщике сети.
Поскольку реальный код очень большой, я сделал фрагмент, чтобы задать вопрос, и этот фрагмент фактически не содержит ошибок.
Так что в моем реальном коде нет jQuery, включенного в файл, который я использовал с помощью функции Ajax. Фактически он был внедрен в элемент <head>
в другом файле PHP.
Кроме того, я не получал ошибку в журналах, потому что у меня было дополнение FireBug, и это в настоящее время Legacy :), и не работает хорошо.
Ссылка: FireFox.
Как насчет упрощения вещей?
$(document).ready(function() {
$('#testajax').load('http://localhost/site.php', function() {
alert('Load was performed.');
});
});
Вы должны повторить 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>';
?>
Просто напишите, что вы используете jQuery 3, это может быть вашей проблемой
Уведомление об устаревании: jqXHR.success (), jqXHR.error () и jqXHR. Обратные вызовы complete () удалены с jQuery 3.0. Вместо этого вы можете использовать jqXHR.done (), jqXHR.fail () и jqXHR.always ().
Если это не сработает, я бы:
- Удалите лишние теги doctype, html, head, body (поскольку браузер или jQuery могут не понравиться).
- Затем добавьте console.log (ответ); к вашему успеху / выполненная функция
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.