使用AngularJS将数据插入数据库

Question

I'm currently developing an AngularJS project, which has a form and on form submit the form data is pushed to a sql database.

I have successfully managed to get the AngularJS project connecting to the sql database, but the data from the form is not inserting itself into the table columns and instead is displaying empty - please see attached for a visual explanation.

Question, why is my data not inserting into the sql and how do I correct my code to get this working?

Any and all advice would be appreciated, thank you.

AngularJS

$scope.submit = function() {
  console.log($scope.form);
  $http.post('XXX/submit.php', {'id':'3','coachName':'1','contractArea':'2','attendance':'4'})
  .success(function(data,status,headers,config){
    console.log('Success');
  });
};

PHP

  $data = json_decode(file_get_contents('php://input'));

  $coachName = mysql_real_escape_string($data->coachName);
  $contractArea = mysql_real_escape_string($data->contractArea);
  $id = mysql_real_escape_string($data->id);
  $attendance = mysql_real_escape_string($data->attendance);

  mysql_connect('XXX','XXX','XX');
  mysql_select_db('XX');
  mysql_query("INSERT INTO participants(`id`, `coachName`, `contractArea`, `attendance`)VALUES('".$id."','".$coachName."','".$contractArea."','".$attendance."')");

SQL

PHP, Update 1

  $servername = "XXX";
  $username = "XXX";
  $password = "XXX";
  $dbname = "XXX";

  $conn = new mysqli($servername, $username, $password, $dbname);

  if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
  }

  $stmt = $conn->prepare("INSERT INTO participants (id,coachName, contractArea, attendance) VALUES (?, ?, ?, ?)");
  $stmt->bind_param("ssss", $iddb, $coachName, $contractArea, $attendance);

  $id = "1";
  $coachName = "2";
  $contractArea = "3";
  $attendance = "4";
  $stmt->execute();

  echo "Success";

  $stmt->close();
  $conn->close();

AngularJS, Update 2

  var variableName = {id:'1', coachName:'AA', contractArea:'BB', attendance:'CC'};
  $http({
    method: 'POST',
    url: "xxx/submit.php",
    data:  variableName,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  }).then(function(){
    console.log('Success');
  },function(){
    console.log('Error');
  });

PHP, Update 2

$servername = 'xxx';
$username = 'xxx';
$password = 'xxx';
$dbname = 'xxx';

$conn = new Mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
  mail( "xxx@xxx.com", "DB connect error", $db->connect_errno . ": " . $db->connect_error );
}

$id = '1';
$coachName = $_POST['coachName'];
$contractArea = $_POST['contractArea'];
$attendance = $_POST['attendance'];

$stmt = $conn->prepare('INSERT INTO participants (id, coachName, contractArea, attendance) VALUE(?, ?, ?, ?)' );
$stmt->bind_param('ssss', $id, $coachName, $contractArea, $attendance);

$stmt->execute();

echo 'Success';

$stmt->close();


$conn->close();

Answer 1

I was also using AngularJS and PHP in one of my project and faced the same problem, then I came across something like this. try to add headers parameter in your request. May be this will help you.

var variableName = {'id':'3','coachName':'1','contractArea':'2','attendance':'4'})
$http({
        method : 'POST',
        url : "XXX/submit.php",
        data   :  variableName,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function(){
               console.log('Success');
           },function(){
               console.log('Error');
        });

I am just trying if it doesn't solve your problem please let me know.

Answer 2

It took a couple hours, a lot of post reading and support from the Stack community, but I've finally figured it out.

This is what I ended up with:

AngularJS

/* Submit */
$scope.submit = function() {
  var request = $http({
    method: "post",
    url: 'xxx/submit.php',
    data: {
      id: '1',
      coachName: 'B',
      contractArea: '2',
      attendance: 'C',
    },
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  });
};

PHP

<?php

  $postdata = file_get_contents("php://input");
  $request = json_decode($postdata);
  $id = $request->id;
  $coachName = $request->coachName;
  $contractArea = $request->contractArea;
  $attendance = $request->attendance;

  $servername = 'xxx';
  $username = 'xxx';
  $password = 'xxx';
  $dbname = 'xxx';

  $conn = new Mysqli($servername, $username, $password, $dbname);

  if ($conn->connect_error) {
    mail( "adamwadsworth@xxx.com", "DB connect error", $db->connect_errno . ": " . $db->connect_error );
  }
  $stmt = $conn->prepare('INSERT INTO participants (id, coachName, contractArea, attendance) VALUES (?, ?, ?, ?)' );
  $stmt->bind_param('ssss', $id, $coachName, $contractArea, $attendance);

  $stmt->execute();

  echo 'Success';

  $stmt->close();

  $conn->close();

?>

SUCCESS

Answer 3

Updated answer

Angular :

$scope.submit = function () {
    $http.post('test.php', {'id':'3','coachName':'1','contractArea':'2','attendance':'4'})
        .success(function(data,status,headers,config){
            if(!data.success)
                 alert(data.message)
            console.log(data);
        });
}

PHP

if($_SERVER['REQUEST_METHOD'] == 'POST')
{
    header('Content-Type:application/json');

    $data = json_decode(file_get_contents('php://input'));

    $servername = 'xxx';
    $username = 'xxx';
    $password = 'xxx';
    $dbname = 'xxx';

    try {
    $dbh = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);

    $sql = 'INSERT INTO participants (id,coachName, contractArea, attendance) VALUES (?, ?, ?, ?)';
                $sth = $dbh->prepare($sql);

    try {

        $dbh->beginTransaction();

        $sth->execute(array(
                        $data->id,//if id is string replace $data->id to '".$data->id."'
                        '".$data->coachName."',
                        '".$data->contractArea."',
                        '".$data->attendance."'
                    ));

        $dbh->commit();

        echo json_encode(['success'=> true,'data'=>$sth->fetch(PDO::FETCH_ASSOC)]);

    } catch(PDOExecption $e) {
        $dbh->rollback();
        echo json_encode(['success'=>false,'message'=>$e->getMessage()]);
    }
} catch( PDOExecption $e ) {
    echo json_encode(['success'=>false,'message'=>$e->getMessage()]);
}

It should work