Question

我有一个简单的设置，用PHP从数据库中提取html内容。如果我进入我的模板页面，它会加载数据并通过一个简单的php回声将其返回给浏览器...而不是火箭科学。

现在，我使用jquery和ajax调用编写了一个html文件。我在我的浏览器中加载html文件，javascript / ajax查询工作。

当我将html加载到数据库并通过php / echo打印出来时，当我查看源代码时内容完全相同，但是ajax查询没有执行。

<html>
<head>
  <title>random query - api - get</title>
  <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<body>
<pre>
executing the GET method
<script language="javascript" type="text/javascript">

$.ajax({
   type: "GET",
   url: "http://some-rand.om.api.com",
   data: "011b38b8-011f-4b03-bb21-4c5bb26600b3",
   success: function(msg){
     alert( msg );
   }
 });

</script>
</pre>
</body>
</html>

任何意见/建议都会很棒。我发现奇怪的是，我没有问题复制http://jquery.com/的源并将其粘贴到数据库并执行php / echo。这很好用。也许一个onLoad（）会帮助......嗯。

Answer 1

以下网址概述了该问题：

XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

当我在chrome中加载javascript控制台时，我得到了这个：

XMLHttpRequest cannot load http://some-rand.om.api.com/user?011b38b8-011f-4b03-bb21-4c5bb26600b3. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

Answer 2

要解决这个问题，在api vhost上，在为ajax查询访问的内容提供服务的代码中，我添加了这个（它也是php）：

header('Access-Control-Allow-Origin: http://some-rand.om.client.com');

现在，当我访问它时，一切都很好并按预期加载。所以，事实上，它与存储在数据库，php或javascript中无关。它与跨站点脚本有关。

或者，超级懒惰（可能不是一个好主意......）：

header('Access-Control-Allow-Origin: ' . $_SERVER["HTTP_ORIGIN"]);

Answer 3

如果您在问题描述中列出了整个代码，那么JavaScript应该包含在$(document).ready(function(){ ... });中。

即

$(document).ready(function(){

    $.ajax({
          type: "GET",
           url: "http://some-rand.om.api.com",
          data: "011b38b8-011f-4b03-bb21-4c5bb26600b3",
       success: function(msg){alert( msg );}
   });

});

通过php javascript动态加载html不执行

3 个答案: