2013-11-15 81 views
15

我試圖使用angularjs將數據從前端插入到mysql數據庫中。 但是,即使沒有錯誤消息,它也不會插入到數據庫中。以下是我使用的代碼。將數據從前端插入到angularjs中的mysql數據庫

的index.html

<html ng-app="demoApp"> 
    <head> 
     <title> AngularJS Sample</title> 
     <script src="js/angular.min.js"></script> 
     <script src="js/angular-route.min.js"></script> 
     <script type="text/javascript" src="js/script.js"></script> 
    </head> 
    <body> 
     <div class="container" ng-view> 
     </div> 
    </body> 
</html> 

的script.js

demoApp.config(function ($routeProvider,$locationProvider) { 
    $routeProvider 
     .when('/', 
     { 
      controller: 'SimpleController', 
      templateUrl: 'Partials/view1.html' 
     }) 
     .when('/view2', 
     { 
      controller: 'SimpleController', 
      templateUrl: 'Partials/view2.html' 
     }) 
     .otherwise({redirectTo: '/'}); 
    }); 
    demoApp.controller('SimpleController',function ($scope,$http){ 
    $http.post('server/view.php').success(function(data){ 
     $scope.friends = data; 
    });; 
    $scope.addNewFriend = function(add){ 
     var data = { 
      fname:$scope.newFriend.fname, 
      lname:$scope.newFriend.lname 
     } 
     $http.post("server/insert.php",data).success(function(data, status, headers, config){ 
      console.log("inserted Successfully"); 
     }); 
     $scope.friends.push(data); 
     $scope.newFriend = { 
      fname:"", 
      lname:"" 
     }; 
    }; 
}); 

View1.html

<div class="container" style="margin:0px 100px 0px 500px;"> 
    Name:<input type="text" ng-model="filter.name"> 
    <br/> 
    <ul> 
     <li ng-repeat="friend in friends | filter:filter.name | orderBy:'fname'">{{friend.fname}} {{friend.lname}}</li> 
    </ul> 
    <br/> 
    <fieldset style="width:200px;"> 
     <legend>Add Friend</legend> 
     <form name="addcustomer" method="POST"> 
      First Name:<input type="text" ng-model="newFriend.fname" name="firstname"/> 
      <br/> 
      Last Name :<input type="text" ng-model="newFriend.lname" name="lastname"/> 
      <br/> 
      <button data-ng-click="addNewFriend()" name="add">Add Friend</button> 
     </form> 
    </fieldset> 
    <a href="#/view2" style="margin:auto;">Next</a> 
</div> 

和以下是我的PHP文件

insert.php

<?php 
    if(isset($_POST['add'])) 
    { 
     $firsname=$_POST['firstname']; 
     $laname = $_POST['lastname']; 
     mysql_connect("localhost", "root", "") or die(mysql_error()); 
     mysql_select_db("angularjs") or die(mysql_error()); 
     mysql_query("INSERT INTO friends (fname,lname) VALUES ('$firsname', '$laname')"); 
     Print "Your information has been successfully added to the database."; 
    } 
?> 

我知道我在這裏做一些愚蠢的事。我今天剛剛開始學習angularjs。 當我嘗試用純HTML插入到DB的PHP代碼它完美的作品。我沒有得到我在做什麼錯在這裏。希望有人會幫助我在這裏

+0

如果php在沒有角度的情況下工作,那麼我們可以將它作爲原因打折,但您應該使用mysqli_ *或PDO而不是mysql_ *函數。使用Chrome開發人員工具或類似工具,您能看到XHR正在對腳本執行POST操作嗎?它是否具有「添加」的值?我看不到你在哪裏設置帖子「添加」的價值,但我不熟悉angular。有關爲什麼不使用mysql_ *的更多信息可以在這裏找到[http://thinkoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) – boodle

+1

你會得到一個回調或至少有一些請求代碼的響應代碼? –

+0

絕對看起來像你沒有發送一個_POST [「add」]值,所以沒有輸入if。 – boodle

回答

17

你的插入數據的腳本是錯誤的。用下面的代替它

$http.post("server/insert.php",{'fstname': $scope.newFriend.fname, 'lstname': $scope.newFriend.lname}) 
     .success(function(data, status, headers, config){ 
      console.log("inserted Successfully"); 
     }); 

並且還改變php如下。

$data = json_decode(file_get_contents("php://input")); 
$fstname = mysql_real_escape_string($data->fstname); 
$lstname = mysql_real_escape_string($data->lstname); 
mysql_connect("localhost", "root", "") or die(mysql_error()); 
mysql_select_db("angularjs") or die(mysql_error()); 
mysql_query("INSERT INTO friends (fname,lname) VALUES ('$fstname', '$lstname')"); 
Print "Your information has been successfully added to the database."; 

這對我來說,當我嘗試與您的代碼。

+2

它也適用於這裏:) – StreetCoder