使用 Angular.js 的 HTTP POST [英] HTTP POST using Angular.js
问题描述
我是这个场景的新手,我想使用 Angular.js 发出 HTTP POST 请求.我正在访问 PHP 脚本,这些脚本的参数只是 POST 变量.每个脚本返回的是一个 JSON 字符串.通常在 HTML 表单中,您可以发出这样的请求:
I'm new to the scene and I want to use Angular.js to make an HTTP POST request. I'm accessing PHP scripts which have parameters that are just POST variables. What gets returned from each script is a JSON string. Normally in an HTML form you can make such a request like:
<form method="post" action="url.php">
<input name="this">
<input name="that">
<input value="Submit">
</form>
根据您的输入和点击提交后,JSON data1 将返回如下内容:{ "code" : 1 }
Depending on your input and after you click submit, JSON data1 will return something like this: { "code" : 1 }
我无法访问脚本或托管它们的服务器.
I have no access to the scripts or to the servers that hosts them.
我想知道 Angular.js 是否可以读取 JSON 数据 1,将该数据 1 与它们在我的 JSON 数据 2 中定义的内容相匹配,然后将它们输出到我的视图中 (<pre>data2</pre>
).
I was wondering if it's possible for Angular.js to read the JSON data1, match that data1 to what they're defined in my JSON data2, and then output them to my view (<pre>data2</pre>
).
例如,如果检索到 { "code" : 1 }
,我希望我的 JSON 输出代码 #1 的值:
For example, if { "code" : 1 }
is retrieved, I want my JSON to output the value for code #1:
{ "code" : [
{ 1: "User already logged in." },
{ 2: "Wrong parameters, try again."},
{ 3: "etc., etc." }
]
};
这是我的尝试:
<form ng-controller="PhpCtrl" name="f1">
<input type="text" name="name">
<input type="text" name="password">
<pre ng-model="codeStatus">{{codeStatus}}</pre>
<input type="submit" ng-click="add()" value="Submit">
</form>
function PhpCtrl($scope, $http, $templateCache) {
$scope.method = 'POST';
$scope.url = 'url.php';
$scope.codeStatus = "";
$scope.add = function() {
$http({
method: $scope.method,
url: $scope.url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
cache: $templateCache
}).
success(function(response) {
$scope.codeStatus = response.data;
}).
error(function(response) {
$scope.codeStatus = response || "Request failed";
});
return false;
};
}
到目前为止,它在视图中发布的所有内容都是请求失败",哈哈,虽然它正在处理 HTTP/1.1 200.我知道我还有很长的路要走,但我会很感激任何帮助.一旦我弄清楚如何将正确的 JSON 数据 1 发布到视图,下一步就是匹配和输出适当的数据 2.提前致谢!
All it's posting so far to the view is "Request failed" lol, although it's processing HTTP/1.1 200. I know I still have a ways to go but I would appreciate any help. Once I figure out how to post the proper JSON data1 to the view, the next step is matching and outputting the appropriate data2. Thank you in advance!
推荐答案
实际上问题出在 PHP 后端,您没有像往常一样检索发布的数据,这对我有用:
Acctually the problem is in the backend with PHP you don't retrieve the posted data like usual, this worked for me:
function PhpCtrl($scope, $http, $templateCache) {
var method = 'POST';
var url = 'url.php';
$scope.codeStatus = "";
$scope.add = function() {
var FormData = {
'name' : document.f1.name.value,
'password' : document.f1.password.value
};
$http({
method: method,
url: url,
data: FormData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
cache: $templateCache
}).
success(function(response) {
$scope.codeStatus = response.data;
}).
error(function(response) {
$scope.codeStatus = response || "Request failed";
});
return false;
};
}
在 PHP 文件中:
$data = json_decode(file_get_contents("php://input"));
echo $data->name;
希望对您有所帮助.
这篇关于使用 Angular.js 的 HTTP POST的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!