- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在学习 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>
最佳答案
从你的代码看来,你误解了一些概念。
DOCTYPE
之外的所有HTML 标签应该在根里面 html
标签。建议在 body
底部添加 JS将(概念上)有助于页面加载性能的标记。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/
我是 javascript 的新手(今天开始弄乱它)。 我正在尝试更改名为“bar”的元素(div)的高度。条形图将成为图表的一部分。 我可以毫无问题地将按钮连接到更改栏高度的函数。一切正常,除了条形
错误 -> “UIVIew”没有名为“addSubView”的成员 override func viewDidLoad() { super.viewDidLoad() // Do an
我在命令行工具项目中复制并粘贴了 main.swift 下面链接中的代码。 How do you use CGEventTapCreate in Swift? 它构建没有错误,但是当我运行时, gua
我在尝试编译我的代码时遇到以下错误。 ERROR! ..\myCode\CPOI.cpp:68:41: error: cannot dynamic_cast 'screenType' (of type
我正在尝试将多个字符串连接到一个我已为其分配内存的字符串指针。这是一个例子: char *finalNumString = malloc(sizeof(char)*1024); finalNumStr
我在使用 dup2() 和 pipe() 时遇到问题。 当我尝试将管道的写入端 dup2 到 STDOUT_FILENO 时,我收到了 EBADF。 我用 gdb 在 dup2(pout[1], ST
首先,我应该说我运行的是 Windows 7。 因此,今天早上我尝试像往常一样从我的存储库中提取数据,但我做不到。我得到了错误: The authenticity of host 'github.co
刚开始在虚拟环境中运行Python,乱用Django,无法激活虚拟环境。 花了最后 4 个小时尝试在本地终端/VS 代码上激活虚拟环境 (venv),但没有成功。 避免使用“sudo pip inst
Tidyverse 的粉丝经常给出使用小标题而不是数据框的几个优点。它们中的大多数似乎旨在保护用户免于犯错误。例如,与数据框不同,小标题: 不需要 ,drop=FALSE不从数据中删除维度的论据。 不
我一直在对 Elm 应用程序进行 docker 化时遇到问题。据我所知,我已经创建了一个完整且有效的 Docker 文件……但它不起作用。 我会解释的。 所以我的脚本在 3 个文件中运行。 首先是启动
我可以在 Controller 中使用@Autowired,例如 @RestController public class Index { @Autowired HttpServlet
我定义了一个方法和一个函数: def print(str:String) = println val intToString = (n:Int) => n.toString 现在我想创作它们。 我的问
当我控制台单独记录变量“pokemons”时,它确实返回一个数组。但是当我尝试映射它时,出现错误: TypeError: pokemons.map is not a function 我的代码: im
每当我尝试在 Python 解释器中导入 smtplib 时,都会收到此错误: ImportError: cannot import name fix_eols 我该如何解决这个问题? 编辑:这是完整
我正在使用 Meteor.js 开发一个项目,但在使用 Handlebar 时遇到了一些问题:我想检索集合的最后一项,并显示字段:其中包含 html 的文本: 这是我的javascript代码: Te
你好,我想使用 Service 实现 GestureDetector 但是我有这个错误The method onTouchEvent(MotionEvent) of type GestureServi
我正在尝试在 Controller bean 中 Autowiring 接口(interface) 在我放置的上下文配置文件中 和 我的 Controller 类是 @Controller pub
我试图在 mainwindow.cpp 中包含 QtSvg,但是当我编译时它说无法打开包含文件:QtSvg。我已经在我的 *.pro 文件中添加了这个(QT += svg)。我可以知道可能是什么问题吗
鉴于以下 PostgreSQL 代码,我认为这段代码不容易受到 SQL 注入(inject)攻击: _filter 'day' _start 1 _end 10 _sort 'article_name
我想执行以下操作。这在 MySQL 中是非法的。 PostGRESQL 中关联的 CTE(“with”子句)有效。这里的假设是 MySQL 中的子查询不是完全限定的 CTE。 请注意:这个查询显然非常
我是一名优秀的程序员,十分优秀!