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

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

javascript php jquery html ajax

Javascript Ajax调用似乎无法识别我的文件,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我有一个非常简单的HTML文件，其中有一个按钮。单击此按钮时，函数loadDoc（）将在javascript文件（ajax.js）中运行。ID为ajax_文本的div变为“clicked”。到目前为止还不错现在我尝试对一个php文档进行ajax调用。php文档应该响应“Hello World！”。我试图通过使用警报（警报（消息））来显示此消息。php文档与我的HTML文档位于同一文件夹中我在ajax调用中做错了什么我已经尝试了多个URL，例如： - '' -文件的完整路径 -'localh

我有一个非常简单的HTML文件，其中有一个按钮。单击此按钮时，函数loadDoc（）将在javascript文件（ajax.js）中运行。ID为ajax_文本的div变为“clicked”。到目前为止还不错

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

我在ajax调用中做错了什么

我已经尝试了多个URL，例如： - '' -文件的完整路径 -'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>

<?php  echo "Hello World"; ?>

PHP:

<!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>

<?php  echo "Hello World"; ?>

尝试在包含html的页面中编写javascript代码。它应该有效

<!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>
  function loadDoc() {
  document.getElementById('name').innerHTML = "Steven";

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


约翰
标题2
更改内容
函数loadDoc（）{
document.getElementById（'name'）.innerHTML=“Steven”；
$.ajax({
键入：“GET”，
url:'ajax_info.php'，
成功：功能（msg）{
警报（msg）；
}
});
}

看起来您好像是从文件资源管理器中以文件的形式调用html页面，但不应该通过web服务器调用。
如果您在浏览器中的地址有

file://somefolders/myhtml.html

您的php脚本（实际上是服务器）会说“你好，我不在这里！”->它抛出“请求的资源上不存在“访问控制允许源代码”头。因此，不允许访问源代码“null”

现在，您可以告诉您的服务器“不，不用麻烦，我只允许所有人使用！” 这是设置

标题（'Access-Control-Allow-Origin:'）时所做的操作
但您最初的问题是html文件不是在同一个源（即您的（本地）服务器）上调用的
因此，如果您键入浏览器的地址栏http://localhost/ajax.html
而且不要在文件浏览器中双击文件，因为现在它们（html和php）都生活在同一个环境中。使用chrome的开发工具来分析是否确实发出了请求以及响应是什么。在$.ajax调用中也使用“error”回调来查看错误是什么。这就是为什么您应该添加错误回调（与success类似，但只是error:function（response）{console.log（response）；}，
）您能直接调用php脚本吗？（通过键入http://localhost/ajax_info.php
进入浏览器）@Jeff你说得对！如果我输入并运行它（即使没有标题（'Access-Control-Allow-Origin:'）；在我的php文件中），它也会运行！谢谢大家的评论！我发现您在关闭
后包含了
s。。在
之前剪切/通过它，而不是在它之后剪切/通过它，这假定所有文件都在同一文件夹中。因此jquery-3.2.1.js和ajax_info.php必须与上述文件位于同一文件夹中。没有指定任何其他文件夹的路径。