ionic/angular $http post form-data请求

最新推荐文章于 2021-03-11 05:53:56 发布

原创最新推荐文章于 2021-03-11 05:53:56 发布 · 6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #http #form-data #post

webapp-app 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在AngularJS中设置$http服务以使用POST方法发送表单数据，并自定义转换函数来序列化请求数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要有两个步骤，一是重置$http的heads参数，二是参数转换方法

$http的heads参数

var param = {url:'',method:'post'}
//transformRequestAsFormPost是自定义方法，代码在下面
param['transformRequest'] = transformRequestAsFormPost;
//虽然transformRequestAsFormPost中也对headers做了改变，但不知道为什么不好用，自测在这里修改才好用
param['headers'] = { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};

transformRequestAsFormPost

app.factory(
  "transformRequestAsFormPost",
  function() {
    // I prepare the request data for the form post.
    function transformRequest( data, getHeaders ) {
      var headers = getHeaders();
      headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";
      return( serializeData( data ) );
    }
    // Return the factory value.
    return( transformRequest );
    // ---
    // PRVIATE METHODS.
    // ---
    // I serialize the given Object into a key-value pair string. This
    // method expects an object and will default to the toString() method.
    // --
    // NOTE: This is an atered version of the jQuery.param() method which
    // will serialize a data collection for Form posting.
    // --
    // https://github.com/jquery/jquery/blob/master/src/serialize.js#L45
    function serializeData( data ) {
      // If this is not an object, defer to native stringification.
      if ( ! angular.isObject( data ) ) {
        return( ( data == null ) ? "" : data.toString() );
      }
      var buffer = [];
      // Serialize each key in the object.
      for ( var name in data ) {
        if ( ! data.hasOwnProperty( name ) ) {
          continue;
        }
        var value = data[ name ];
        buffer.push(
          encodeURIComponent( name ) +
          "=" +
          encodeURIComponent( ( value == null ) ? "" : value )
        );
      }
      // Serialize the buffer and clean it up for transportation.
      var source = buffer
        .join( "&" )
        .replace( /%20/g, "+" )
        ;
      return( source );
    }
  }
)

参考

http://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm

https://forum.ionicframework.com/t/ionic-framework-http-post-request/29195