HTTP Post method does not work with AngularJS + PHP + MySQL

Question

Although I found other topics reporting the same issue, none of them helped me.

I'm learning AngularJS and I tried to insert data into a MySQL database. I have a really simple HTML file where the user can provide a name and age, and then click in a Submit button which would put this data into the MySQL database.

Since it's just for learning purposes, I named the database and the table "test".

I am using PHP as the server language. I have:
- An index.html file for the view
- A script.js file where I use AngularJS HTTP POST method to insert data into the MySQL database
- A config.php file where I deal with the connection with the server and the insertion of data into the database.

Also, my table consists of only 3 columns: an ID (unique, auto-incremented), a "name"(text) and an "age"(int).

The code for each file is here:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>AngularJS-PHP-MySQL</title>
    <!-- AngularJS CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <!-- script.js with implementation of Module and Controller -->
    <script src="script.js" ></script>
  </head>
  <body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form id="myForm" action="" method="post">
    <input type="text" name="name" id="name" value="" placeholder="Name" ng-model="nameModel">
    <input type="text" name="age" id="age" value="" placeholder="Age" ng-model="ageModel">
    <input type="button" name="sub" id="sub" value="Submit" ng-click="insertData()">
  </form>
</div>


  </body>
</html>

script.js

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http){
  $scope.insertData = function(){
    $http.post("config.php",{'name': $scope.nameModel, 'age': $scope.ageModel})
        .success(function(data, status, headers, config){
            console.log("inserted Successfully");
        });
    }
});

config.php

<?php
$servername   = "127.0.0.1";
$username     = "root";
$password     = "";
$Table_name   = "test";

mysql_connect($servername, $username, $password);
mysql_select_db($Table_name) or die(mysql_error());

$name = $_POST['name'];
$age = $_POST['age'];

mysql_query("INSERT INTO $Table_name('name', 'age') VALUES('$name', '$age')");

?>

I get an alert that the POST method was successful but it did not insert the data into the table. I have no idea why and I don't find an answer online.

**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) that has been [removed](http://php.net/manual/en/mysql.php) from PHP. You should select a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Jun 20 '16 at 19:52

score 2 · Accepted Answer · edited May 23 '17 at 10:29

I found in another topic here that AngularJS and some server side languages like PHP have different ways to serialize and transmit the data. Like the post says, the problem lies with PHP being unable to understand AngularJS’s transmission natively.

To avoid that, I explicitly built the header on my inserData() function:

script.js

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http){
  $scope.insertData = function(){
    var request = $http({
            method: "post",
            url: "config.php",
            data: {
                name: $scope.nameModel,
                age: $scope.ageModel,
            },
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
  }
});

I also changed my config.php file into:

<?php

$servername         = "127.0.0.1";
$username           = "root";
$password           = "";
$dbname             = "test";

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

$name = $request->name;
$age = $request->age;

$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO test(name, age) VALUES('$name', '$age')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
}
else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

?>

Now they can transmit compatible data. I also assigned the connection to a variable and then used it to query my data.

The HTML remains the same. With these changes, everything here is working properly now.

score 0 · Answer 2 · answered Jun 20 '16 at 19:14

0

I'm not sure if your PHP/MYSQL code is OK.

Could you try the following code?

<?php
$servername   = "127.0.0.1";
$username     = "root";
$password     = "";
$Table_name   = "test";

$connection = mysql_connect($servername, $username, $password);
mysql_select_db($Table_name, $connection) or die(mysql_error());

$name = $_POST['name'];
$age = $_POST['age'];

$sqlQuery = "INSERT INTO $Table_name('name', 'age') VALUES('$name', '$age')";
mysql_query($sqlQuery, $connection);
?>

answered Jun 20 '16 at 19:14

Valdek Santana

337
1
8

I found out that the problem was in how AngularJS and PHP transmit data. I posted an answer with a code that is working now. Thanks for your help! – Matheus Eduardo Freitag Jun 20 '16 at 19:49

HTTP Post method does not work with AngularJS + PHP + MySQL

2 Answers2