Angularjs和jquery不能以我的常規簡單形式工作

我正在學習Angularjs，並且我創建了簡單的表單。其實我是PHP開發人員，所以我更願意使用PHP作爲服務器端腳本語言。我無法提交數據到服務器，我嘗試了很多方法，但這些都非常複雜，如果我在標準方法嘗試Angularjs不工作，請檢查我的代碼，並給我最好的方法來使用angularjs，jQuery和PHP。幫我！Angularjs和jquery不能以我的常規簡單形式工作

angular.module("mainModule", []) 
 
    .controller("mainController", function($scope, $http) { 
 
    $scope.person = {}; 
 
    $scope.serverResponse = ''; 
 

 
    $scope.submitData = function() { 
 
     var config = { 
 
     headers: { 
 
      "Content-Type": "application/x-www-form-urlencoded" 
 
     } 
 
     }; 
 

 
     $http.post("server.php", $scope.person, config) 
 
     .success(function(data, status, headers, config) { 
 
      $scope.serverResponse = data; 
 
     }) 
 
     .error(function(data, status, headers, config) { 
 
      $scope.serverResponse = "SUBMIT ERROR"; 
 
     }); 
 
    }; 
 
    });

<?php 
 
if (isset($_POST["person"])) 
 
    { 
 
    // AJAX form submission 
 
    $person = json_decode($_GET["person"]); 
 

 
    $result = json_encode(array(
 
     "receivedName" => $person->name, 
 
     "receivedEmail" => $person->email)); 
 
    } else 
 
    { 
 
    $result = "INVALID REQUEST DATA"; 
 
    } 
 

 
    echo $result; 
 

 
?>

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body ng-app="mainModule"> 
 
    <div ng-controller="mainController"> 
 
    <form name="personForm1" novalidate ng-submit="submitData()"> 
 
     <label for="name">First name:</label> 
 
     <input id="name" type="text" name="name" ng-model="person.name" required /> 
 
     <br /> 
 
     {{person.name}} 
 
     <br /> 
 
     <label for="email">email:</label> 
 
     <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required /> 
 
     <br /> 
 
     <br /> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    <br /> 
 
    <div> 
 
     {{$scope.serverResponse}} 
 
    </div> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <!--<script type="text/javascript" src="script/parsley.js"></script> 
 
    <script src="script.js"></script>--> 
 
</body> 
 

 
</html>

來源

2015-02-08 learner

您需要在您的html源代碼中指定'ng-app' – 2015-02-08 11:00:47

您的HTML代碼中存在拼寫錯誤，請檢查'{{person.name}}'。另外 - 更具體的什麼不工作。你沒有從服務器獲得答案嗎？數據沒有發送？ – simeg 2015-02-08 11:09:08

你面臨什麼問題？ – 2015-02-08 11:09:14

更新，這是剛剛經過PHP和Apache測試的代碼 - 它的工作原理。我也改變了你的server.php文件，如下所示。該文件是基於AngularJS Hub的Server Calls sample創建的。使用相同的來源創建mainController.js'$ http.post（...）方法調用，以便它成功地將數據發佈到服務器。

截圖（提交後）

enter image description here

server.php

<?php 
if ($_SERVER["REQUEST_METHOD"] === "POST") 
    { 

    $result = "POST request received!"; 

    if (isset($_GET["name"])) 
    { 
    $result .= "\nname = " . $_GET["name"]; 
    } 

    if (isset($_GET["email"])) 
    { 
    $result .= "\nemail = " . $_GET["email"]; 
    } 

    if (isset($HTTP_RAW_POST_DATA)) 
    { 
    $result .= "\nPOST DATA: " . $HTTP_RAW_POST_DATA; 
    } 

    echo $result; 
    } 

?>

personForm.html

<!DOCTYPE html> 
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 

    </head> 
     <body ng-app="mainModule"> 
      <div ng-controller="mainController"> 
       <form name="personForm1" validate ng-submit="submit()"> 
        <label for="name">First name:</label> 
        <input id="name" type="text" name="name" ng-model="person.name" required /> 
        <br /> 
        {{person.name}} 
        <br /> 
        <label for="email">email:</label> 
        <input id="email" type="text" name="email" ng-model="person.email" required /> 
        <br /> 
        <br /> 
        <button type="submit">Submit</button> 
       </form> 
       <br /> 
       <div> 
        {{serverResponse}} 
       </div> 
      </div> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> 
      <script src="mainController.js"></script> 
      <!--<script type="text/javascript" src="script/parsley.js"></script> 
      <script src="script.js"></script>--> 
     </body> 

</html>

個

mainController.js

angular.module("mainModule", []) 
    .controller("mainController", function ($scope, $http) 
    { 
    $scope.person = {}; 

    $scope.serverResponse = ""; 

    $scope.submit = function() 
    { 

     console.log("form submit"); 

     var params = { 
      name: $scope.person.name, 
      email: $scope.person.email 
     }; 

     var config = { 
      params: params 
     }; 

     $http.post("server.php", $scope.person, config) 
     .success(function (data, status, headers, config) 
     { 
      console.log("data " + data + ", status "+ status + ", headers "+ headers + ", config " + config); 
      $scope.serverResponse = data; 
      console.log($scope.serverResponse); 
     }) 
     .error(function (data, status, headers, config) 
     { console.log("error"); 
      $scope.serverResponse = "SUBMIT ERROR"; 


     }); 
     }; 
    });// JavaScript source code

替代方式，用JSON處理：

server_json.php

<?php 
    if ($_SERVER["REQUEST_METHOD"] === "POST") 
    { 
    /* code source: http://stackoverflow.com/a/22852178/2048391 */ 
    $data = array(); 
    $json = file_get_contents('php://input'); // read JSON from raw POST data 

    if (!empty($json)) { 
     $data = json_decode($json, true); // decode 
    } 

    print_r($data); 

    } 

    ?>

截圖（提交後）

Screenshot

來源

2015-02-08 11:36:18 jyrkim

可以使用標準方法還是使用ajax方法？ – learner 2015-02-08 13:36:29

@SettiMahesh你的意思是當你從angularjs發佈？從您的服務器日誌中檢查您是否獲取了從控制器發佈的數據。其次，在您的角度控制器中添加console.log（「succes」）以測試您是否從server.php獲得響應。 +你可能不得不使用config：「application/x-www-form-urlencoded」，就像idan建議的一樣，並在你的視圖中添加{{$ scope.serverResponse}}。 – jyrkim 2015-02-08 18:18:15

@SettiMahesh還檢查了這是哪些相關$ http.post http://stackoverflow.com/a/12191613/2048391 – jyrkim 2015-02-08 18:43:49

您使用角形式和發佈來自控制器的數據內部那麼你不應該假設是提action="server.php" method="post"，因爲你要做的從控制器即$http.post('server.php')這一呼籲。

只需在您的表單標籤中添加ng-submit="submitData(person, 'result')"指令，該指令將調用您的控制器方法發佈數據，您的代碼將開始工作。

HTML

<form name="personForm1" novalidate ng-submit="submitData(person, 'result')"> 
    <label for="name">First name:</label> 
    <input id="name" type="text" name="name" ng-model="person.name" required /> 
    <br />{{person.name'}} 
    <label for="email">Last name:</label> 
    <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required /> 
    <br /> 
    <br /> 
    <button type="submit">Submit</button> 
</form>

希望這可以幫助你。謝謝。

來源

2015-02-08 11:13:02

從你的代碼看來，你誤解了一些概念。

你不使用jQuery在所有 - 除非歐芹（不熟悉這個...）需要它
除了DOCTYPE所有的HTML標籤應該是根html標籤內你可以刪除它。建議在body標記的底部添加JS，這會在概念上爲頁面加載性能做出貢獻。
您導入的JS順序很重要，應該依賴於依賴項（例如：AngularJS只能包含jQuery，但在您的情況下，angular並不知道它，因爲在導致Angular構建的AngularJS之後添加了jQuery其JQ精簡版代替）
你添加一個submitData到控制器的範圍，但你永遠不會把它叫做 - 當用戶提交表單，所以你需要從表單中刪除action和method屬性並添加ng-submit你的意圖很可能是使用它：<form name="personForm1" method="post" novalidate ng-submit="submitData(person, 'thePropNameOnWhichYouWantToSaveTheReturnedData')">。這兩個參數都是多餘的，因爲您在$scope上有這些參數。
與$http服務一起發送的參數config用於配置，而不是數據。請閱讀：Angular $http
$http的默認行爲是發送JSON作爲請求的主體。看起來你期望在你的PHP代碼上有一個表單。例如，這可以在config中進行更改，或者您可以瞭解如何反序列化PHP上的JSON（對不起，我不知道PHP）。
將要保存數據的屬性添加到$scope，以便渲染它。

固定的客戶端代碼的建議：

angular.module("mainModule", []) 
 
    .controller("mainController", function($scope, $http) { 
 
    $scope.person = {}; 
 
    $scope.serverResponse = ''; 
 

 
    $scope.submitData = function() { 
 
     // Let's say that your server doesn't expect JSONs but expects an old fashion submit - you can use the `config` to alter the request 
 
     var config = { 
 
     headers: { 
 
      "Content-Type": "application/x-www-form-urlencoded" 
 
     } 
 
     }; 
 

 
     $http.post("server.php", $scope.person, config) // You can remove the `config` if the server expect a JSON object 
 
     .success(function(data, status, headers, config) { 
 
      $scope.serverResponse = data; 
 
     }) 
 
     .error(function(data, status, headers, config) { 
 
      $scope.serverResponse = "SUBMIT ERROR"; 
 
     }); 
 
    }; 
 
    });

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body ng-app="mainModule"> 
 
    <div ng-controller="mainController"> 
 
    <form name="personForm1" novalidate ng-submit="submitData()"> 
 
     <label for="name">First name:</label> 
 
     <input id="name" type="text" name="name" ng-model="person.name" required /> 
 
     <br /> 
 
     {{person.name}} 
 
     <br /> 
 
     <label for="email">email:</label> 
 
     <input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required /> 
 
     <br /> 
 
     <br /> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    <br /> 
 
    <div> 
 
     {{$scope.serverResponse}} 
 
    </div> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <!--<script type="text/javascript" src="script/parsley.js"></script> 
 
    <script src="script.js"></script>--> 
 
</body> 
 

 
</html>

你也應該閱讀一些關於AngularJS docs，也許做他們完全教程。這是非常有幫助的

來源

2015-02-08 11:35:14 idan

確實在頭文件中需要內容類型，爲什麼？ – 2015-02-08 12:04:55

根據我的表單要求，我需要使用parsley.js，但當我包含angularjs時它不工作。 – learner 2015-02-08 13:26:20

我給了ajax提交，但我沒有得到任何serverResponse – learner 2015-02-08 14:04:41

Angularjs和jquery不能以我的常規簡單形式工作

回答

相關問題