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不能以我的常规简单形式工作

回答

相关问题