ارسال دیتا POST از AngularJS به کد PHP یکی از خسته کننده ترین وظایف هست و وقتی من در گوگل جستجو کردم, پست هایی رو پیدا کردم که بسیار پیچیده بود یا اینکه به خوبی توضیح داده نشده بود.
در این مقاله سعی کردیم موضوع طرح شده رو بصورت واضح و ساده بیان کنیم.
قبل از مدیریت Angular HTTP Post بگذارید بهتون نشون بدم که ما چطور از http.post در JQuiery استفاده می کنیم. این یک قطعه کد برای انجامش هست :
$.post("filename.php",{var1: data, var2: data},function(data){
//Do something with data return from PHP file.
});
در PHP ما از متغیر سراسری POST_$ برای دسترسی به var1, var2 استفاده می کنیم. مشکل وقتی که از Angular استفاده کنیم پیش میاد, چون متد POST که Angular برای ارسال اطلاعات استفاده میکنه بصورت JSON هست. پس در اسکریپت PHP اگر ما POST_$ رو بصورت مستقیم استفاده کنیم, قادر نیستیم مقادیر POST رو دریافت کنیم.
بیایید یک پروژه Angular بسازیم که شامل یک فرم ساده ی Login با فیلدهای ایمیل و رمزعبور هست.
اولین چیزی که نیاز داریم اینه که کتابخانه ی AngularJS رو نصب کنیم, که شما میتونید اون رو دانلود کنید یا از CDN استفاده کنید. من اون رو دانلود کرده و در فولدر محلی قرار دادم.
با استفاده از کد زیر اون رو به پروژه متصل کنید :
<script src="angular.js"></script>
حالا صفحه ی login رو در HTML بسازید. کد فرم ما بصورت زیر هست :
<div id="container">
<div id="login" ng-app='angular_post_demo' ng-controller='sign_up'>
<input type="text" size="40" ng-model="email"><br>
<input type="password" size="40" ng-model="password"><br>
<button ng-click="check_credentials()">Login</button><br>
<span id="message"></span>
</div>
</div>
ما اسم اپلیکیشن خودمون رو angular_post_demo و اسم کنترلر رو sign_up گذاشتیم.
بیایید فایل app.js رو برای پیاده سازی اپلیکیشن angular بسازیم. فایلی با نام app.js ساخته و کد زیر رو در اون قرار بدید :
var app = angular.module('angular_post_demo', []);
حالا ما اپلیکیشن رو پیاده سازی کردیم. بیایید تعدادی خط کد جاوا اسکریپت برای مدیریت فرم ساخته شده, وارد کنیم. یک فایل دیگر با اسم home.js ساخته و کد زیر رو در اون قرار بدید :
app.controller('sign_up', function ($scope, $http) {
/*
* This method will be called on click event of button.
* Here we will read the email and password value and call our PHP file.
*/
$scope.check_credentials = function () {
document.getElementById("message").textContent = "";
var request = $http({
method: "post",
url: window.location.href + "login.php",
data: {
email: $scope.email,
pass: $scope.password
},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
document.getElementById("message").textContent = "You have login successfully with email "+data;
});
}
});
نکته : این فایل ها رو توسط تگ <script> زیر بخش <head> وارد کنید.
تغییرات مهم در فایل PHP هست. اینجا میتونیم ببینیم که چطور اطلاعات POST رو در PHP وقتی که از Angular ارسال میشه, بخونیم.
نام فایل ما login.php هست و کد داخلش بصورت زیر :
/*
* Collect all Details from Angular HTTP Request.
*/
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
@$email = $request->email;
@$pass = $request->pass;
echo $email; //this will go back under "data" of angular call.
/*
* You can use $email and $pass for further work. Such as Database calls.
*/
()file_get_contents فایل رو خوانده و اون رو بصورت string تبدیل می کنه و توسط ()json_decode ما میتونیم تعیین کنیم به چه قسمتی از اطلاعات دسترسی داشته باشیم.
شما میتونید به این پروژه از طریق Gitrhub هم دسترسی داشته باشید. برای اینکار اون رو دانلود کنید یا اینکه با استفاده از دستور زیر clone کنید :
git clone https://github.com/codeforgeek/angular-post-php.git
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید