我正在学习 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 - 你可以删除它,除非 parsely (不熟悉这个......)需要它
- 除
DOCTYPE
应该在根内部html
标签。建议在底部添加JSbody
标签将(概念上)有助于页面加载性能。
- 您导入的 JS 的顺序很重要,并且应该按依赖关系进行(例如:AngularJS 仅当包含 jQuery 时才可以使用 jQuery,但在您的情况下,Angular 不知道它,因为 jQuery 是在 AngularJS 之后添加的,这会导致 Angular 构建其 jq lite反而)
- 您添加了一个
submitData
到您的控制器的范围,但您从未调用它 - 您的意图可能是在用户提交表单时使用它,因此您需要删除action
and method
表单中的属性并添加ng-submit
: <form name="personForm1" method="post" novalidate ng-submit="submitData(person, 'thePropNameOnWhichYouWantToSaveTheReturnedData')">
。这两个参数都是多余的,因为它们都在$scope
.
- The
config
参数发送与$http
服务用于配置,而不是数据。阅读此处:角度 $http https://docs.angularjs.org/api/ng/service/%24http
- 的默认行为
$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 文档 https://angularjs.org/也许可以做他们的完整教程。这非常有帮助
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)