当前位置: 首页 > 面试题库 >

使用Angular.js的HTTP POST

阎烨
2023-03-14
问题内容

我是新手,我想使用Angular.js发出HTTP
POST请求。我正在访问PHP脚本,这些脚本的参数只是POST变量。每个脚本返回的是一个JSON字符串。通常,以HTML格式可以发出这样的请求:

<form method="post" action="url.php">
<input name="this">
<input name="that">
<input value="Submit">
</form>

根据您的输入以及单击提交后,JSON data1将返回如下内容: { "code" : 1 }

我无权访问脚本或托管它们的服务器。

我想知道Angular.js是否有可能读取JSON数据1,将该数据1与在JSON数据2中定义的数据进行匹配,然后将其输出到我的视图(<pre>data2</pre>)。

例如,如果{ "code" : 1 }检索到,我希望我的JSON输出代码#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
data1发布到视图,下一步就是匹配并输出适当的data2。先感谢您!


问题答案:

准确地说,问题出在PHP后端,您没有像往常一样检索已发布的数据,这对我有用:

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;

希望能有所帮助。



 类似资料:
  • 问题内容: 我正在尝试实现html5的pushstate而不是Angularjs使用的#导航。我曾尝试在Google上寻找答案,还尝试了没有运气的有角度的irc聊天室。 这是我的: app.js 问题答案: 将$ locationProvider注入您的配置,然后设置。 http://docs.angularjs.org/api/ng.$locationProvider 简单的例子: JS: HT

  • 问题内容: 我只是尝试重置这样的值: 但是它没有产生任何东西,有解决的主意吗? jsfiddle上有一个工作示例 问题答案: 这真的是关于JavaScript的问题(因此我添加了“ javascript”标记)。将JavaScript对象(例如$ scope.initial数组)分配给变量时,它是通过引用而不是副本来分配的。所以,这句话 导致$ scope.datas指向$ scope.initi

  • 问题内容: 我是Angular.js的新手,并且阅读我知道Angular没有诸如tap,doubletap等事件。我试图与Hammer.js结合使用而没有成功。 要点代码 现在我已经添加到我的html文件中 但是,当我尝试在我的html中使用它时,它不起作用。 我尝试过 没有人可以解决这个麻烦吗? 问题答案: 快去 将Hammer.js和jquery.hammer.js添加到您的解决方案中。使用J

  • 问题内容: 我将此字段用于编辑视图和创建视图 在控制器中,我有以下代码来禁用输入元素: 请帮忙。 问题答案: 将ng- disabled 或特殊CSS类与ng- class一起使用

  • 问题内容: 我是angular.js的新手,在看似简单的任务上遇到了一些麻烦。 我需要从网站上的json文件中获取下面的json,然后将键(英语,西班牙语等)放入我的html文件中的标签标记中,然后加载其对应的值(0、1、3、2、1 )转换成html范围输入。 json文件包含: 加载json后产生的html应该如下所示: 最后,我想在表单上单击“保存”,并在json文件上在线更新相应键的值。 生

  • 问题内容: 我一直在构建一个简单的应用程序来学习angular.js。到目前为止,我已经将MEAN堆栈中的所有内容连接在一起,并且能够从Mongo中保存和检索数据。 该应用程序本质上是一个待办事项列表。用户可以创建一个项目,并在项目内部创建带有“待办事项”的“卡片”,然后可以从一个州转移到另一个州(“积压”,“进行中”,“完成”等)。 我希望能够将通知推送给所有已连接的人员,以告知其应用程序需要刷