Question

我正在尝试使用Ajax将HTML代码嵌入到div元素中。（同样我们用iframe）。我首先在localhost上测试它，以避免同源策略问题。

网页应用正在wamp服务器上运行。

有两个文件：

带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成功？

Answer 1

如何简化事情？

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

Answer 2

只是提高你使用jQuery 3这可能是你的问题

Deprecation Notice：从jQuery 3.0开始，jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调被删除。您可以使用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）代替。

如果那不起作用我会：

删除额外的doctype，html，head，body标签（因为浏览器或jQuery可能不喜欢）。
然后添加一个console.log（响应）;你的成功/完成功能

Answer 3

我对此进行了长时间的测试，因为我在开发者控制台或网络探查器上没有错误。

由于真正的代码非常大，我制作了一个代码片段来提出问题，而且这个代码段实际上没有任何错误。

所以我的真实代码没有在我使用Ajax函数的文件中包含任何jQuery。它实际上是在其他PHP文件中的<head>元素上注入的。

此外，我没有收到日志错误，因为我有FireBug插件，而且它目前是Legacy :)，并且运行良好。

参考：FireFox。

Answer 4

你应该回复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>';

?>

无法使用AJAX localhost请求html内容

4 个答案: