Sharing Top Content from the Angular-sphere.

Angular Post Request to PHP

  • So in PHP Script if we use $_POST directly we will not be able to receive POST data.
  • Is how to read POST data in PHP sent from Angular.
  • $. post ( “filename.php” , { var1 : data , var2 : data } , function ( data ) { //Do something with data return from PHP file.
  • Create another file as “home.js” and put these code in it.
  • textContent = “You have login successfully with email ” + data ; } ) ; } } ) ;

Learn how to send POST data from Angular.js to PHP Script. Live demo and Source code availble at Github.

@codeforgeek: Angular Post Request to PHP

#Ajax #Angularjs #PHP

Sending Post data from angularjs to PHP code is one of the tedious task and when I search it on Google I found posts which either too complex or not well written to understand concept properly.

I have solved the issue with less line of code and in more understanding and expressive way.

Before heading to Angular HTTP Post let me show you how we do call in JQuery. Here is a code snippet to do that.

In PHP code we use $_POST global variable to access var1,var2. As simple as that. Problem arise with Angular because POST method which angular uses send data using JSON. So in PHP Script if we use $_POST directly we will not be able to receive POST data.

Let’s create one angular project and in that one simple Login form consist of email and password field. I hope you have read basic angularjs tutorial and know how to setup angular project. If not let me give you a quick review.

Very first thing you will need is angularjs library which you can either download or add using CDN, up to you. I use to download it and add it in local folder.

Link : Download Angularjs library (copy and paste the code in angular.js file)

Attach it to your project using

before section.

Now let’s create our login form in HTML. Under the section of your HTML page. Copy paste these code.

We have name our angular app as “angular_post_demo” and controller as “sign_up”. Let’s create our app.js file to initialize angular app. Create file name as “app.js” and put this code in it.

Done ! We have initiated our app. let’s code some JavaScript to deal with form handling. Create another file as “home.js” and put these code in it.

Major change is in the PHP file. Here is how to read POST data in PHP sent from Angular.

file_get_contents() reads the file and convert it into string and by using json_decode() we can determine which part of data we would like to access.

You can download the code from Github either by cloning it or zip file. To run it paste it in “HTDOCS” folder of XAMPP and hit using browser url.

I also have a question: how can I tell if there is a connection problem with the server side?, I mean, can I add something like:

Thank you Shahid, I really appreciate your response and it will be great if you can upgrade your demo.

Can I send my code to you? because I can’t make it work properly. When I call the $scope.user (in my app) the controller doesn’t recognize the value of user, I was trying to send values from myForm.user.value but can’t make it work.

I want to know if we can use this same method to get map coords from database. For example, if we have stored specific coords in a database as markers and our purpose is to populate the most relevant marker according to user search.

Thank you, thank you, thank you!

This was so helpful. I was beating my head against a wall trying to figure out how to simply post stuff, so that PHP could insert into my database. I had a script working with jQuery, but I decided to switch to Ionic and AngularJS. This got me where I needed to go.

When I implemented for my purposes, I was struggling to get hidden fields to work, as that seems to be a huge problem for many in AngularJS. In my particular use case, I thought outside of the box… why did I need a hidden field? I was trying to include data from localStorage, so I just defined variables and posted those. I figured this out mostly from your example and a little bit of tweaking.

I just wanted to add the tidbit in case it helps someone else trying to do similar!

method: “POST”,

Angular Post Request to PHP