问题：

Angularjs和jquery不能以常规的简单形式工作

邢勇

2023-03-14

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>

共有1个答案

桑坚成

2023-03-14

更新后，这是刚刚用php和Apache测试过的代码--它可以工作。我还更改了server.php文件，如下所示。该文件是基于AngularJS Hub的服务器调用示例创建的。同样的源代码用于创建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;
  }

?>

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

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

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

    }

  ?>

类似资料：

在作用域中未定义简单的AngularJS形式

问题内容：我开始在jsfiddle中使用AngularJS表单，并且已经遇到了一个非常简单的表单示例无法按预期工作的问题。我所拥有的只是一个命名表单，由于某种原因，它没有在范围内显示（我期望有一个FormController实例）。我设置了小提琴，下面是基本代码： HTML JS 我在jsfiddle上找不到很多简单的例子，所以我不确定这是否可能与类似的网站发生奇怪的交互（我发现的大多数例子都
jQuery提交功能不能正常工作

我对jQuery提交功能有一些疑问。这里是工作环境 jQuery:1.7。2，铬（18.0.1025.168米）。有两个问题。第一：我的密码是这样的 HTML jQuery 问题是它在firefox和opera中运行良好，但在chrome中运行良好。 2st： html：如上所述。 jQuery：它在火狐、歌剧和铬合金中不起作用。它总是触发form.submit原因。我很困惑。谁能弄清
jQuery中的简单模式

问题内容：我在jQuery中使用SimpleModal，并且有一个确认对话框。如果结果为，则必须调用此对话框。但是，我已经完成了代码，并且仍在寻找想法。我该怎么做？在这里，我有一个问题，即如何从Ajax结果中将其写入同一窗口Confirmdialog。我该怎么做？问题答案：我不确定Confirm函数是否最适合您的需求，但类似的方法应该可以工作：
使用jQuery的表单提交不能在IE8上正常工作

问题内容： jQuery 似乎无法在IE8上正常使用，但可以在Firefox，Chrome和Safari上使用。我正在提交表单并以 JSON 格式回复。这是我的代码： test.php： _test.php： jsFile.js：行为：在Firefox，Chrome，Safari中：当我提交表单时，将 textfield（txt）的值成功填充到 DIV（testDiv）中，而不会干扰整
为什么这个简单的AngularJS ng-show无法正常工作？

问题内容：我无法弄清楚为什么我的简单AngularJS应用无法正常工作。“正在加载…”应该被隐藏，然后“完成！” 1秒后应显示。的HTML： Javascript：问题答案：您需要告诉angular您更新了var：要不就
最常用的jQuery表单验证(简单)

本文向大家介绍最常用的jQuery表单验证(简单)，包括了最常用的jQuery表单验证(简单)的使用技巧和注意事项，需要的朋友参考一下废话不多说了，直接给大家贴代码了，具体代码如下所示：以上所述是小编给大家介绍的最常用的jQuery表单验证(简单)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！

Angularjs和jquery不能以常规的简单形式工作

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档