Angularjs 和 jquery 不能以我的常规简单形式工作 [英] Angularjs and jquery not working in my regular simple form

查看：25
本文介绍了Angularjs 和 jquery 不能以我的常规简单形式工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在学习 Angularjs 并创建了简单的表单.实际上我是 PHP 开发人员，所以我更喜欢使用 php 作为服务器端脚本语言.我无法将数据提交到服务器，我尝试了很多方法，但如果我在标准方法中尝试，这些方法非常复杂 Angularjs 不起作用请检查我的代码，并为我提供使用 angularjs、jquery 和 php 的最佳方法.帮帮我！

angular.module("mainModule", []).controller("mainController", function($scope, $http) {$scope.person = {};$scope.serverResponse = '';$scope.submitData = function() {变量配置 = {标题:{内容类型":应用程序/x-www-form-urlencoded"}};$http.post("server.php", $scope.person, config).success(function(data, status, headers, config) {$scope.serverResponse = 数据；}).error(function(data, status, headers, config) {$scope.serverResponse = "提交错误";});};});

$person->name,收到电子邮件" =>$person->email));}  别的{$result = "无效的请求数据";}回声 $result;?>

<头><body ng-app="mainModule"><div ng-controller="mainController"><form name="personForm1" novalidate ng-submit="submitData()"><label for="name">名字:</label><input id="name" type="text" name="name" ng-model="person.name" required/><br/>{{person.name}}<br/><label for="email">电子邮件:</label><input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required/><br/><br/><button type="submit">提交</button></表单><br/><div>{{$scope.serverResponse}}

<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>--></html>

解决方案

更新，这是刚刚用 php 和 Apache 测试过的代码 - 并且可以正常工作.我还更改了您的 server.php 文件，如下所示.该文件是基于 AngularJS Hub 的 服务器调用示例创建的.使用相同的源创建 ma​​inController.js' $http.post(...) 方法调用，以便它成功地将数据发布到服务器.

截图(提交后)

server.php

personForm.html

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><头><meta charset="utf-8"/><title></title><body ng-app="mainModule"><div ng-controller="mainController"><form name="personForm1" 验证 ng-submit="submit()"><label for="name">名字:</label><input id="name" type="text" name="name" ng-model="person.name" required/><br/>{{person.name}}<br/><label for="email">电子邮件:</label><input id="email" type="text" name="email" ng-model="person.email" required/><br/><br/><button type="submit">提交</button></表单><br/><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>--></html>

ma​​inController.js

angular.module("mainModule", []).controller("mainController", function ($scope, $http){$scope.person = {};$scope.serverResponse = "";$scope.submit = 函数 (){console.log("表单提交");变量参数 = {名称:$scope.person.name，电子邮件:$scope.person.email};变量配置 = {参数:参数};$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 = 数据；console.log($scope.serverResponse);}).error(function (data, status, headers, config){ console.log("错误");$scope.serverResponse = "提交错误";});};});//JavaScript 源代码

另一种方式，使用 JSON 处理:

server_json.php

截图(提交后)

I am learning Angularjs and I created simple form. Actually i am PHP developer so i preferred to use php as a server side scripting language. I am unable to submit the data to server, i tried so many methods but those are very complex if i am trying in standard method Angularjs is not working please check my code, and give me best method to work with angularjs, jquery and php. help me!

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>

解决方案

Updated, this is code that was just tested with php and Apache - and it works. I also changed your server.php file like below. The file was created based on AngularJS Hub's Server Calls sample. The same source was used to create mainController.js' $http.post(...) method call so that it successfully posts data to the server.

Screenshot (after submit)

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

Alternative way, with JSON handling:

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 (after submit)

这篇关于Angularjs 和 jquery 不能以我的常规简单形式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆