在使用（基于 webpack 的）ZURB Foundation Framework 时，如何通过 jQuery AJAX 从 PHP 脚本中检索数据？

Question

所以我在一个完整的 ZURB 模板项目中工作，该项目是通过基础客户端安装的。 我已经完成了一些先决条件，比如在 Babel7 中启用 ES7 Features async/await（ZURB Foundation 使用 gulp 作为任务运行器，Babel7 作为转译器，webpack4 作为模块捆绑器）。

我想为我的网站设置一个后端，因为我对 php 有最多的经验，所以我选择了 php。 我已经对我的第一个 php 文件做了一个成功的 AJAX，至少是这样。

这是我从 Javascript 执行的 ajax：

function phpAJAX(){
  console.log("phpAJAX was called")
  $.get("/../assets/php/test.php", {

  }).then((response) => {
    console.log(response)
  })
}

这是php端的代码：

<?php

echo "Hello!";

?>

这是我在浏览器控制台中得到的结果

phpAJAX was called            indexLogic.js:24:2
<?php                         indexLogic.js:28:4



echo "Hello!";



?>

我的 PHP 是按照这里的描述设置的（我的 devMachine 没有管理员权限......） https://www.quora.com/Can-PHP-be-run-without-installing-WampServer-for-Windows

我将我的 php 根文件夹设置为如下所示： php -S 0.0.0.0:8080 -t D:\\foundationtests\\src\\assets\\php

我对网络服务器没有很多经验。 我希望这个最小配置足以在本地运行服务器并将 AJAX 调用发送到由 phpServer 监视/提供的相应 php 脚本。 但是，由于我对设置网络服务器的经验很少，我不知道上述部分不受欢迎的响应是否是由于 AJAX 配置错误、php 脚本不足或服务器配置错误造成的 ^^

编辑：

我也已经尝试过直接寻址本地主机，就像这样

function phpAJAX(){
  console.log("phpAJAX was called")
  $.get("http://localhost:8080/test.php", {

  }).then((response) => {
    console.log(response)
  })
}

但是后来我在浏览器控制台中收到以下错误：

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:8080/test.php. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt)

Answer 1

$.get("/../assets/php/test.php",看起来不对 - 请注意 PHP 将在服务器端执行，而 JS 将在您的浏览器中执行。如果您尝试使用带有本地的 ajax 请求某些内容path 它将尝试加载该文件。这也是您收到文件内容而不是数据的原因。

如果您想从您的服务器接收数据，您必须使用类似$.get("http://myApi.com")的 URL 或使用 IP 地址 / localhost而不是http://myApi.com来调用 http 请求.

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

编辑：

您的错误来自所谓的“跨源策略”，您必须在服务器上激活 CORS：

https://developer.mozilla.org/de/docs/Web/HTTP/CORS

https://enable-cors.org/server_php.html