Angularjs和jquery不能以我的常规简单forms工作

我正在学习Angularjs，我创建了简单的表单。 其实我是PHP开发人员所以我更喜欢使用php作为服务器端脚本语言。 我无法将数据提交给服务器，我尝试了很多方法，但是如果我尝试使用标准方法Angularjs不能正常工作请检查我的代码，并给我最好的方法来处理angularjs，jquery和php。 帮我！

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

  $person->name, "receivedEmail" => $person->email)); } else { $result = "INVALID REQUEST DATA"; } echo $result; ?> 

      
 
 First name:  
 {{person.name}} 
 email:  
 
 Submit 
 
 
 {{$scope.serverResponse}} 
 
   <!-- -->   

Answer 1

更新了 ，这是刚刚用php和Apache测试的代码 – 它可以工作。 我也改变了你的server.php文件，如下所示。 该文件是基于AngularJS Hub的Server Calls示例创建的 。 使用相同的源创建mainController.js’ $ http.post（…）方法调用，以便它成功地将数据发布到服务器。

截图 （提交后）

server.php

personForm.html

         
 
 First name:  
 {{person.name}} 
 email:  
 
 Submit 
 
 
 {{serverResponse}} 
 
       

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

截图 （提交后）

Answer 2

你的代码似乎误解了一些概念。

1. 你根本就没有使用jQuery – 你可以删除它，除非解析（不熟悉这个……）需要它
2. 除DOCTYPE之外的所有HTML标记都应位于根html标记内。 建议在body标签的底部添加JS，这将（在概念上）有助于提高页面加载性能。
3. 你导入的JS的顺序是重要的，应该是依赖的（例如：AngularJS只有在包含它时才能使用jQuery但在你的情况下，angular不知道它，因为在AngularJS之后添加jQuery导致Angular构建它的jq lite代替）
4. 您向控制器的范围添加了一个submitData ，但您从未调用它 – 您的意图可能是在用户提交表单时使用它，因此您需要从表单中删除action和method属性并添加ng-submit ：
   

   。 这两个参数都是多余的，因为你在$scope上有它们。

5. 使用$http服务发送的config参数用于配置，而不是数据。 在这里阅读： Angular $ http
6. $http的默认行为是发送JSON作为请求的正文。 您似乎希望PHP代码上有一个表单。 例如，这可以在config更改，或者您可以学习如何在PHP上反序列化JSON（抱歉，我不知道PHP）。
7. 将要保存数据的属性添加到$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"; }); }; }); 

      
 
 First name:  
 {{person.name}} 
 email:  
 
 Submit 
 
 
 {{$scope.serverResponse}} 
 
      

Answer 3

你正在使用角forms并在内部发布控制器数据然后你不应该提到action="server.php" method="post"因为你要从控制器那里做这个调用，即$http.post('server.php') 。

只需在表单标记中添加ng-submit="submitData(person, 'result')"指令，它将调用发布数据的控制器方法，您的代码将开始工作。

HTML

 
 First name:  
{{person.name'}} Last name:  
 
 Submit  

希望这可以帮到你。 谢谢。