如何在使用(基于 webpack 的)ZURB Foundation Framework 时通过 jQuery AJAX 从 PHP 脚本中检索数据?
How to retrieve data from PHP script via jQuery AJAX while using (webpack based) ZURB Foundation Framework?
所以我在一个完整的 ZURB 模板项目中工作,该项目是通过基础客户端安装的。
我已经完成了一些先决条件,比如在 Babel7 中启用 ES7 特性 async/await(ZURB 基金会使用 gulp 作为任务 运行ner,Babel7 作为转译器,webpack4 作为模块打包器)。
我想为我的网站设置后端,因为我对 php 最有经验,所以我选择了 php。我已经成功地 AJAX 我的第一个 php 文件,至少有点。
这是我从 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 调用由 php 服务器发送到相应的 php 脚本 watched/served。
但是,由于我对设置网络服务器的经验很少,所以我不知道上述部分不希望的响应是由于配置错误 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)
$.get("/../assets/php/test.php",
看起来不对 - 请注意 PHP 将在服务器端执行,而 JS 将在您的浏览器中执行。如果您尝试使用 ajax 和本地路径来请求某些内容,它将尝试加载该文件。这也是您收到文件内容而不是数据的原因。
如果你想从你的服务器接收数据,你必须使用像 $.get("http://myApi.com")
这样的 URL 或使用 IP 地址 / localhost
而不是 [=13] 来调用 http 请求=].
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
编辑:
您的错误来自所谓的 "cross origin policy",您必须在您的服务器上激活 CORS:
所以我在一个完整的 ZURB 模板项目中工作,该项目是通过基础客户端安装的。 我已经完成了一些先决条件,比如在 Babel7 中启用 ES7 特性 async/await(ZURB 基金会使用 gulp 作为任务 运行ner,Babel7 作为转译器,webpack4 作为模块打包器)。
我想为我的网站设置后端,因为我对 php 最有经验,所以我选择了 php。我已经成功地 AJAX 我的第一个 php 文件,至少有点。
这是我从 Javascript:
执行的 ajaxfunction 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 调用由 php 服务器发送到相应的 php 脚本 watched/served。 但是,由于我对设置网络服务器的经验很少,所以我不知道上述部分不希望的响应是由于配置错误 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)
$.get("/../assets/php/test.php",
看起来不对 - 请注意 PHP 将在服务器端执行,而 JS 将在您的浏览器中执行。如果您尝试使用 ajax 和本地路径来请求某些内容,它将尝试加载该文件。这也是您收到文件内容而不是数据的原因。
如果你想从你的服务器接收数据,你必须使用像 $.get("http://myApi.com")
这样的 URL 或使用 IP 地址 / localhost
而不是 [=13] 来调用 http 请求=].
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
编辑:
您的错误来自所谓的 "cross origin policy",您必须在您的服务器上激活 CORS: