2016-06-20 15 views
1

Obwohl ich andere Themen gefunden habe, die das gleiche Problem melden, half mir keiner von ihnen.HTTP-Post-Methode funktioniert nicht mit AngularJS + PHP + MySQL

Ich lerne AngularJS und ich versuchte, Daten in eine MySQL-Datenbank einzufügen. Ich habe eine wirklich einfache HTML-Datei, in der der Benutzer einen Namen und ein Alter angeben kann, und dann klicken Sie auf eine Submit-Schaltfläche, die diese Daten in die MySQL-Datenbank einfügt.

Da es nur für Lernzwecke ist, nannte ich die Datenbank und die Tabelle "Test".

Ich benutze PHP als Serversprache. ich habe:
- Eine index.html Datei für die Ansicht
- A script.js Datei, wo ich AngularJS HTTP POST-Methode verwenden, um Daten in die MySQL-Datenbank einfügen
- A config.php Datei, wo ich mit der Verbindung mit dem Server und dem Einfügen von Daten in die Datenbank beschäftigen.

Auch meine Tabelle besteht aus nur 3 Spalten: eine ID (einzigartig, automatisch inkrementiert), ein "Name" (Text) und ein "Alter" (int).

Der Code für jede Datei ist hier:

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')"); 

?> 

Ich bekomme eine Warnung, dass die POST-Methode erfolgreich war, aber die Daten wurden nicht in die Tabelle eingefügt. Ich habe keine Ahnung warum und ich finde keine Antwort online.

+0

** Gefahr **: Sie verwenden [eine ** veraltete ** Datenbank-API] (http://stackoverflow.com/q/12859942/19068), die [entfernt] wurde (http: // php. net/manual/de/mysql.php) von PHP. Sie sollten einen [modernen Ersatz] (http://php.net/manual/en/mysqlinfo.api.choosing.php) auswählen. Sie sind anfällig für [SQL injection attacks] (http://bobby-tables.com/) **, dass eine moderne API es einfacher machen würde [zu verteidigen] (http://stackoverflow.com/questions/60174/ Best-Way-zu-verhindern-sql-injection-in-php) von selbst. – Quentin

+0

Ich werde das sofort ändern! Danke für die Warnung! –

Antwort

2

Ich fand in another topic here die AngularJS und einige Server-Seite Sprachen wie PHP verschiedene Möglichkeiten haben, die Daten zu serialisieren und zu übertragen. Wie der Post sagt, liegt das Problem darin, dass PHP die Übertragung von AngularJS nativ nicht verstehen kann.

, dass zu vermeiden, baute ich ausdrücklich den Header auf meine inserData() Funktion:

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' } 
    }); 
    } 
}); 

ich meine config.php Datei auch in geändert:

<?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(); 

?> 

Jetzt können sie kompatible Daten übertragen. Ich habe auch die Verbindung zu einer Variablen zugewiesen und sie dann verwendet, um meine Daten abzufragen.

Das HTML bleibt gleich. Mit diesen Änderungen funktioniert jetzt alles einwandfrei.

0

Ich bin mir nicht sicher, ob Ihr PHP/MYSQL-Code in Ordnung ist.

Könnten Sie den folgenden Code versuchen?

<?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); 
?> 
+0

Ich habe herausgefunden, dass das Problem darin besteht, wie AngularJS und PHP Daten übertragen. Ich habe eine Antwort mit einem Code geschrieben, der jetzt funktioniert. Danke für Ihre Hilfe! –