如何使用角度$http发送表单数据

How to use angular $http to send FormData

本文关键字:表单 数据 http 何使用      更新时间:2023-09-26
var formData = new FormData();
formData.append('type', type);
formData.append('description', description);
formData.append('photo', photo);  
var request = new XMLHttpRequest();
request.open('POST', '{{ path('my_webservice') }}');
request.send(formData);

如何使用$http发送FormData

我对上述代码的主要问题是我不知道在收到响应时如何生成回调。

所以,如果我能在 Angular 中做到这一点,我就进入了更熟悉的领域。

谢谢

编辑

这似乎是异步工作的。在易于实施方面,似乎比建议的任何 Angular 解决方案都要好。

                request.onload = function (e) {
                    if (request.readyState == 4 && request.status == 200) {
                        console.log(request.responseText);
                    }
                };
您可以使用

$http发布。

但是content-type必须更改为application/x-www-form-urlencoded,并且数据应该使用key=value对进行序列化。

这些设置应注入到$http的基础XMLHttpRequest对象。

这是一篇向您展示如何做到这一点的文章。

AngularJS

$http.post(myRestUrl, {my:"object"}).success(function(data, status, headers, config){/* DO STUFF*/});

阅读更多内容,请访问 https://docs.angularjs.org/api/ng/service/$http

或者使用 XMLHttpRequest 执行此操作:

client.onreadystatechange = function() {
  if(this.readyState == 2) {
    print(this.getAllResponseHeaders());
  }
}

http://www.w3.org/TR/XMLHttpRequest/#the-send%28%29-method

表单添加一个 ng-submit 属性,并为其分配一个函数,以使用 $http 服务处理 POST 请求。Angular 使用 promises API 处理 http 响应。以下是 https://docs.angularjs.org/api/ng/service/$http 的示例:

$http({
  method: 'GET',
  url: '/someUrl',
  data: { type: 'myType',
          description:'myDescription'
 }
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });