简体   繁体   English

通过php JavaScript动态加载HTML不会执行

[英]dynamic loading of html via php javascript not executing

i have a simple setup, with php pulling html content from a database. 我有一个简单的设置,用php从数据库中提取html内容。 if i go to my template page, it loads the data and returns it to the browser via a simple php echo ... not rocket science. 如果我转到模板页面,它将加载数据并通过简单的php echo将其返回到浏览器……而不是火箭科学。

now, i've written an html file using jquery and an ajax call. 现在,我已经使用jquery和ajax调用编写了一个html文件。 i load the html file in my browser and the javascript / ajax query works. 我将html文件加载到浏览器中,并且javascript / ajax查询有效。

when i load the html into the database and print it out via the php / echo, the content is the exact same when i view the source, but the ajax query doesn't execute. 当我将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>

Any comments / suggestions would be great. 任何意见/建议都很好。 What I find bizarre, is i have no problem copying the source of http://jquery.com/ and pasting it into the db and doing the php / echo. 我觉得很奇怪,是我没有问题复制http://jquery.com/的源并将其粘贴到db中并进行php / echo。 this works fine. 这很好。 maybe an onLoad() would help...hm. 也许onLoad()会有所帮助...嗯。

The issue is outlined in the following url: 以下网址概述了该问题:

XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin XmlHttpRequest错误:Access-Control-Allow-Origin不允许使用原点null

When I load the javascript console in chrome I get this: 当我在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.

To resolve the problem, on the api vhost, in the code that serves the content accessed by the ajax query, i added this (it is also php): 为了解决该问题,在api虚拟主机上,在提供通过ajax查询访问的内容的代码中,我添加了此代码(也是php):

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

Now when I access it, it's all good and loads as expected. 现在,当我访问它时,一切都很好,并按预期加载。 So, infact, it wasn't related to it being stored in the database, php or javascript. 因此,实际上,它与存储在数据库,php或javascript中无关。 It was related to cross site scripting. 它与跨站点脚本相关。

Or, to be super lazy (probably not a great idea...): 或者,超级懒惰(可能不是一个好主意...):

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

If in your description of the problem you are listing the whole of the code, then the JavaScript should be wrapped in a $(document).ready(function(){ ... }); 如果在问题描述中要列出整个代码,则应将JavaScript包装在$(document).ready(function(){ ... }); .

ie

$(document).ready(function(){

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

});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM