Angularjs 和 jquery 无法以我的常规简单形式工作

Question

我正在学习 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";
        });
    };
  });

<?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>

Answer 1

您正在使用 angular 表单并在内部从控制器发布数据那么你不应该被提及 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>

希望对您有所帮助。谢谢

Answer 2

从你的代码看来，你误解了一些概念。

您根本没有使用 jQuery - 您可以删除它，除非 parsely（不熟悉这个...）需要它
除 DOCTYPE 之外的所有 HTML 标签都应该在根 html 标签内。建议在 body 标签底部添加 JS，这将（概念上）有助于页面加载性能。
您导入 JS 的顺序很重要，应该按依赖项排序（例如：AngularJS 只有在包含时才可以使用 jQuery，但在您的情况下 angular 不会知道它是因为 jQuery 是在 AngularJS 之后添加的，这导致 Angular 改为构建其 jq lite）
您向控制器的范围添加了一个 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 上阅读更多内容，也许还可以学习他们的完整教程。非常有帮助

Answer 3

已更新，这是刚刚用 php 和 Apache 测试过的代码 - 它可以工作。我还更改了您的 server.php 文件，如下所示。该文件是基于 AngularJS Hub 的 Server Calls sample 创建的。相同的源被用于创建 mainController.js' $http.post(...) 方法调用，以便它成功将数据发布到服务器。

截图（提交后）

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:  */
     $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);

    }

  ?>

截图（提交后）

Angularjs 和 jquery 无法以我的常规简单形式工作

Angularjs and jquery not working in my regular simple form

javascript

php

jquery

angularjs

angularjs-scope