javascript - 如何在使用(基于 webpack)ZURB 基础框架时通过 jQuery AJAX 从 PHP 脚本中检索数据?
问题描述
所以我在一个完整的 ZURB 模板项目中工作,该项目是通过基础客户端安装的。我已经完成了一些先决条件,比如在 Babel7 中启用 ES7 Features async/await(ZURB Foundation 使用 gulp 作为 taskrunner,Babel7 作为 transpiler,webpack4 作为 module bundler)。
我想为我的网站设置一个后端,因为我对 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)
解决方案
$.get("/../assets/php/test.php",
看起来不对 - 请注意 PHP 将在服务器端执行,而 JS 将在您的浏览器中执行。如果您尝试使用带有本地路径的 ajax 请求某些内容,它将尝试加载该文件。这也是您收到文件内容而不是数据的原因。
如果您想从服务器接收数据,您必须使用类似 URL$.get("http://myApi.com")
或使用 IP 地址 /localhost
而不是http://myApi.com
.
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
编辑:
您的错误来自所谓的“跨源策略”,您必须在服务器上激活 CORS:
推荐阅读
- java - Android Studio — 应用程序未在 Android 模拟器上显示/启动
- c# - 更新双倍?通过在数组中引用它
- android - 如何在android studio中修复这个循环依赖错误
- android - Unity3d 无法在编译时合并多个 android 清单
- php - 从库中拍照并将图像上传到服务器 swift 4
- ios - 如何在 AWS Userpool iOS 中一次只登录一台设备?
- java - 我的应用在 android 6.0 以下崩溃的原因是什么?
- java - 正则表达式将科学记数法转换为地理坐标
- java - 在Java中继承抽象类时是否需要再次实现接口的所有方法?
- javascript - 从管道将图像插入“背景图像”