Ajax调用似乎无法识别我的文件

时间:2017-11-29 22:23:34

标签: javascript php jquery html ajax

我有一个非常简单的HTML文件,它有一个按钮。单击此按钮时,函数loadDoc()在javascript文件(ajax.js)中运行。 ID为ajax_text的div变为'clicked'。到目前为止一切都很好。

现在我正在尝试对php文档进行ajax调用。 php文档应该回显“Hello World!”。我试图通过使用警报(警报(消息))来显示此消息。 php文档与我的HTML文档位于同一文件夹中。

我在ajax电话中做错了什么?

我已经尝试了多个网址,例如: - 'http://localhost/ajax_info.php' - 文件的完整路径 - 'localhost / ajax_info.php'

等。等。

HTML:

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <div id="name">John</div>
    <div id="demo">
      <h2>Header 2</h2>
      <button type="button" onclick="loadDoc()">Change Content</button>
    </div>
    <script src="jquery-3.2.1.js"></script>
    <script src="ajax.js"></script>
  </body>
</html>

JavaScript:

function loadDoc() {

document.getElementById('name').innerHTML = "Steven";

    $.ajax({
        type: 'GET',
        url: 'ajax_info.php',
        success: function(msg){
            alert(msg);
        }
    });
 }

PHP:

<?php  echo "Hello World"; ?>

2 个答案:

答案 0 :(得分:1)

看起来您的文件浏览器将您的html页面称为文件,但不是 - 您应该 - 通过您的网络服务器。 如果你在浏览器中的地址有file://somefolders/myhtml.html你的php脚本(好吧,实际上是服务器)会说&#34;你好,那不是我在哪儿!&#34; - &GT;它抛出&#34; No&#39; Access-Control-Allow-Origin&#39;标头出现在请求的资源上。起源&#39; null&#39;因此不允许访问。&#34;

现在你可以告诉你的服务器&#34;不,不要打扰,我只是允许每个人!&#34;
这是您在设置header('Access-Control-Allow-Origin: *');

时执行的操作

但是你最初的问题是html文件没有被调用到同一个来源,即你的(本地)服务器。

因此,如果您在浏览器的地址栏中输入http://localhost/ajax.html不要,只需双击文件浏览器中的文件就可以了,因为现在他们(html和php)都生活在同一个环境中。

答案 1 :(得分:0)

尝试在具有html的页面内编写javascript代码。 它应该工作。

{{1}}