Angular post request processing

Posted Jun 28, 20202 min read

Angular post request processing.

Use jQuery request in the project angular. I want to replace it with angular's own request. It turns out that the background can't get the parameters. So, query the data and analyze it to make a summary.

First, requests are different in angular and jQuery. as follows:

  • jQuery:

The requested contentType is:

application/x-www-form-urlencoded; charset=UTF-8

This type of data is encoded as a key-value pair separated by'&', and the key and value are separated by'='. Characters that are not letters or numbers will be percent-encoded:This is why this type does not support binary data(Multipart/form-data should be used instead).
The data parameter is processed:

//json object
{a:3, b:2}
//treat the json object as
"a=3&b=2"
  • Angular:

Request contentType:

application/json

data parameter:

//json object
{a:3,c:2}

In summary, the angular submission background is json, not form data. We need to convert the json object to parameter splicing. When submitting the background, it is the form data:

/**
   * Convert application/json to application/x-www-form-urlencoded
   * @param data
   */
  handlerPostParams(data) {
    const params = [];
    for(const key in data) {
      if(data[key]&& !isNull(data[key])) {
        if(data[key]instanceof Array) {
          for(let i = 0; i <data[key].length; i++) {
            if(data[key][i]&& !isNull(data[key][i])) {
              const value = data[key][i];
              const name = key +'[' + i +']';
              const innerObj = {};
              innerObj[name]= value;
              params.push(this.handlerPostParams(innerObj));
            }
          }
        } else if(data[key]instanceof Object) {
          for(const k in data[key]) {
            if(data[key][k]&& !isNull(data[key][k])) {
              const value = data[key][k];
              const name = key +'[' + k +']';
              const innerObj = {};
              innerObj[name]= value;
              params.push(this.handlerPostParams(innerObj));
            }
          }
        } else {
          const param = encodeURIComponent(key) +'=' + encodeURIComponent(data[key]);
          params.push(param);
        }
      }
    }
    return params.join('&');
  }