javascript - Angularjs 和 jquery 不能以我的常规简单形式工作-6ren

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

转载作者：行者123 更新时间：2023-11-29 18:09:55

25

4

我正在学习 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>

最佳答案

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

你根本没有使用 jQuery - 你可以删除它，除非解析(不熟悉这个......)需要它
除DOCTYPE 之外的所有HTML 标签应该在根里面 html标签。建议在 body 底部添加 JS将(概念上)有助于页面加载性能的标记。
您导入 JS 的顺序很重要，应该按依赖项排序(例如:AngularJS 只有在包含 jQuery 时才能使用它，但在您的情况下，angular 不知道它，因为 jQuery 是在 AngularJS 之后添加的，这会导致 Angular 构建取而代之的是 jq lite)
您添加了一个 submitData到你的 Controller 的范围，但你从来没有调用它 - 你的意图可能是在用户提交表单时使用它，所以你需要删除 action和 method属性并添加 ng-submit : <form name="personForm1" method="post" novalidate ng-submit="submitData(person, 'thePropNameOnWhichYouWantToSaveTheReturnedData')"> .这两个参数都是多余的，因为你在 $scope 上有它们.
config与 $http 一起发送的参数服务用于配置，而不是数据。在这里阅读: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 上阅读更多内容也许做他们的完整教程。非常有用

关于javascript - Angularjs 和 jquery 不能以我的常规简单形式工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28393141/

25

4

0

文章推荐： JavaScript - 等同于 PHP 类 self::

文章推荐： android - ProgressDialog 没有出现在 AsyncTask 中

文章推荐：安卓漏洞 : Crop intent works on some devices

常规 ^ 运算符
当给定两个 bool 参数时，^ 运算符执行异或，例如 true ^ true == false true ^ false == true false ^ true == true false ^ f
groovy - 如何下载文件？ - 常规
我需要下载一个文件(例如: https://www.betaseries.com/srt/391160 )所以我在网上找到了不同的方法: def download(String remoteUrl,
math - 常规-是否可以根据现有平均值并为所得平均值指定新参数来计算平均值？
可以说，我们正在计算考试成绩的平均值：起始考试成绩：75、80、92、64、83、99、79 平均值= 572/7 = 81.714 ... 现在给出81.714，如果您不知道初始测试分数，是否可以
multithreading - 常规-线程池中的线程数
我和一个 friend 正在争论线程池中的线程数应该是处理器计数+ 1还是仅仅是处理器计数。我之所以选择处理器数量，是因为每个处理器可以分配偶数个线程，而他选择处理器数量+ 1是因为他认为这将帮助他
常规 : Closures or Methods
我已经养成了尽可能使用闭包来代替常规方法的习惯，即使我不需要访问自由变量。所以，我将使用这个: def addNumbers = { 左、右 -> 左 + 右 } ..而不是这个: def addNu
java - 常规 NoClassDefFoundError
我对 Groovy 非常陌生，我正在尝试《Groovy in Action》书中的这个示例。我有这个 fibonacci.groovy 程序，当尝试使用 java 命令运行该程序时，我收到 NoCla
android - 如何在Android中将字体粗细设置为轻巧、常规
我有 3 个 TextView 。我需要将它们的权重设置为 Light、Regular 和 Condensed。有人可以帮助我了解如何在 Android 中实现这一点吗？最佳答案在 TextVie
iphone - 直接从应用程序链接到设置/常规/位置服务
如果用户启动我的应用程序并最初选择不允许位置服务，我想通过 UIAlertMessage 提示用户重新考虑(“更新”和“不，谢谢。”)。 “不，谢谢。”这将是一个简单的取消，我希望“更新”将它们直接链
常规 'assert' : How to display the value?
如何在 groovy 中显示一个值是真还是假？我使用 Eclipse 作为我的 IDE。 assert 4 * ( 2 + 3 ) - 6 == 14 //integers only 而且我也
java - 使用Java编程安全/常规/原子寄存器
我的问题与“多处理器编程的艺术”一书有关。第4章介绍安全/常规/原子寄存器及其实现。以下是安全多读取器单写 boolean 寄存器的以下实现，该寄存器基于安全单读取器单写 boolean 寄存器，被
常规 : String to float Conversion
使用下面的代码来保存 float 的值 domainInstance.standardScore = params["standardScore"] as float 在这种情况下，我的输入是 17.
常规 : String to float Conversion
使用下面的代码来保存 float 的值 domainInstance.standardScore = params["standardScore"] as float 在这种情况下，我的输入是 17.
ios - 获取设置数据->常规->关于
在iOS的about部分中，它具有有关设备的大量信息。我和我可以访问此信息吗？我想快速获取settings -> General -> About的数据。在iOS中获得相同的价格是否可行？最佳答
c# - SimpleInjector结合了WCF和“常规”注册
我正在开发Windows服务，它将承载两件事： WCF服务用于定期作业执行的“常规” Windows服务（使用Quartz.net）因此，基本上，一个应用程序（可执行）承载这两种服务类型。这两种
mysql - 常规 mysql 表中的内连接
在mysql中，我有一个名为users的表，其中包含系统中的用户列表... id | name | surname | active ____________________________ 1
java - 常规 JDBC 设置
所以我在 Debian 服务器上设置了一个 MySQL 数据库，并且它在 phpMyAdmin 客户端上运行良好。我目前正在开发一个项目，编写一个 Java 服务器，该服务器能够通过 JDBC 连接使
Javascript 常规 exp 无法正常工作
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
c# - 常规 Exp 而不是字符串拆分
前两天考试了，其中一道题是把@前面的字母换成新的名字所以在试卷中我们有 array = "toto@yahoo.com","mimi@yahoo.com".soso@yahoo.com"所以我们应该
php - 常规 exp 从字符串中获取最后一个数字
大家好如果字符串语法如下，我如何从字符串中获取数字(正数): t_def_type_id_2 t_def_type_id_22 t_def_type_id_334 所以，在第一个字符串中我想得到 1
linux - 是否有独立于平台的非阻塞方式来判断文件描述符是否是磁盘文件(常规/目录)
我正在寻找不会在内核中阻塞的文件描述符类型。我知道我可以使用 fstat(2) 但 fstat 还会给我各种元数据信息(访问时间等)，这些信息可能会阻塞任意时间(特别是在网络文件系统上)。编辑:我正

首页

博学

6Ren·AI

商城

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