AngularJS 是一个前端 JavaScript 框架,它提供了 $http
服务来处理 AJAX 请求。PHP 是一种服务器端脚本语言,常用于处理前端发送的数据并返回响应。
// 在 AngularJS 控制器中
app.controller('MyController', ['$scope', '$http', function($scope, $http) {
$scope.submitData = function() {
var data = {
name: $scope.name,
email: $scope.email
};
// 发送 POST 请求到 PHP 后端
$http({
method: 'POST',
url: 'api/process.php',
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function(response) {
// 请求成功处理
console.log('成功:', response.data);
$scope.result = response.data.message;
}, function(error) {
// 请求失败处理
console.error('错误:', error);
$scope.error = '请求失败';
});
};
}]);
<?php
header('Content-Type: application/json');
// 获取 POST 数据
$data = json_decode(file_get_contents('php://input'), true);
// 验证数据
if (!isset($data['name']) || !isset($data['email'])) {
echo json_encode(['error' => '缺少必要字段']);
exit;
}
// 处理数据
$name = filter_var($data['name'], FILTER_SANITIZE_STRING);
$email = filter_var($data['email'], FILTER_SANITIZE_EMAIL);
// 验证邮箱格式
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo json_encode(['error' => '无效的邮箱格式']);
exit;
}
// 模拟处理成功
$response = [
'success' => true,
'message' => "你好, $name! 你的邮箱($email)已接收。",
'receivedData' => $data
];
echo json_encode($response);
?>
原因: 前端和后端不在同一个域下时,浏览器会阻止跨域请求。
解决方案:
// 在 PHP 文件顶部添加 CORS 头
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
原因: 可能是 Content-Type 设置不正确或数据格式问题。
解决方案:
file_get_contents('php://input')
获取原始 POST 数据解决方案: 添加 CSRF 令牌
// AngularJS 添加 CSRF 令牌
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common['X-CSRF-TOKEN'] = '你的令牌值';
}]);
// PHP 验证 CSRF 令牌
if ($_SERVER['HTTP_X_CSRF_TOKEN'] !== '你的令牌值') {
http_response_code(403);
die('无效的 CSRF 令牌');
}
通过以上实现,你可以建立一个安全可靠的 AngularJS 到 PHP 的 AJAX 通信机制。
没有搜到相关的文章