angular2のhttpParamSerializerJQLike？

Question

JSONをRuby API用にシリアル化するにはどうすればいいですか？

アンギュラ1

$scope.submitForm = function() {  
    var data = {"contato": $scope.contato, "id":$scope.contato.id, "_method":'PUT'}; 
    $http.post(
     'http://myApi/contatos/' + $scope.contato.id, 
     **$httpParamSerializerJQLike(data)**, 
     { 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
      datatype: "JSONP" 
     }).then(function successCallback(response) { 
      modalContato.show(); 
      setTimeout(function(){ 
       modalContato.hide(); 
       $state.go('contato-detalhe', {"id":$scope.contato.id}); 
      }, 1500);    

    }); 
};  

Angular2：

insertContato(contato: Contato) { 
    let headers = new Headers({ 
    'Content-Type': 'application/x-www-form-urlencoded'   
    });  
    let options = new RequestOptions({ headers: headers }); 
    this._http  
    .post(this.urlApi + '/contatos', JSON.stringify(contato), options)  
    .subscribe(data => { 
     console.log('Funciona: ' + data.text()); 
    }, error => { 
     console.log('Erro: ' + error.text()) 
    });   
} 

"JSON.stringify（contato）は" それは$ httpParamSerializerJQLike（データ）と同じ動作を持っていません。 JSONの壊れたサーバ内の...

はContatosController番号：2016年4月13日午後01時25分55秒-0300 処理で127.0.0.1のために、 "/ contatos" POSTを開始作成HTML パラメータとして：{ "{\" nome \ "：\" asd \ "、\" email \ "：\" asd@asda.com \ "、\" telefone \ "：\" 123 \ "}" =>なし） 完了400 4msの中に不正な要求（ActiveRecordの：0.0ms）

正しいです：

はPOSTを開始 "/ contatos" のために127.0.0.1 at 2016-04-12 17:00:24 -0300 ContatosControllerによる処理＃create as JSON パラメータ：{"contato" => {"nome" => "felipe"、 "telefone" => "5555 "}} 完了278msで200 OK（閲覧：0.1ms | ActiveRecord：229.4ms）

Answer 1

これはこれを処理する最善の方法ではないかもしれないと言ってこれを序文にしますが、それは私が自分の問題を世話した方法です（The Angular 2 docs don 'どこにx-www-form-urlencodedがあるのか​​は分かりません）。

あなたのデータは

var data = {"contato": $scope.contato, "id":$scope.contato.id, "_method":'PUT'}; 

のように設定されているのであれば基本的には、フォーム自身にそれを変換したいです。

var encodedData = "contato=" + contato + "&id=" + contato.id + "&_method=PUT"; 

あなたはあなたのPOSTリクエストはあなたがフォームデータを渡している、JSONを渡していないので、それをJSON.stringifyする必要はありません。この

this._http  
.post(this.urlApi + '/contatos', encodedData, options)  
.subscribe(data => { 
    console.log('Funciona: ' + data.text()); 
}, error => { 
    console.log('Erro: ' + error.text()) 
}); 

に見えるように変更することができます。

こちらがお役に立てば幸いです。

Answer 2

私はそうのような私http.tsプロバイダ内の関数を書いた---

private formatData(data){ 
    let returnData = ''; 
    console.log(data); 
    let count = 0; 
    for (let i in data){ 
     if(count == 0){ 
      returnData += i+'='+data[i]; 
     }else{ 
      returnData += '&'+i+'='+data[i]; 
     } 
     count = count + 1; 
     console.log(returnData); 
    } 
    return returnData; 
} 

はこのようにそれを呼び出します。

post('localhost/url',data){ 
data = this.formatData(data); 
} 

Answer 3

私はこの問題を解決することができ、同様の問題があった：

import { Headers, Http, Response, URLSearchParams, RequestOptions } from '@angular/http'; 

let headers = new Headers({ 
    'Content-Type': 'application/x-www-form-urlencoded', 
    'Accept': '*/*'}); 
    let options = new RequestOptions({ headers: headers }); 
    let body = new URLSearchParams(); 

    body.set("message", JSON.stringify(m_dataRequest)); 
    body.set("webService", "authService"); 

    return this.http 
      .post(this.Url, body.toString(), options) 
      .toPromise() 
      .then(this.extractData) 
      .catch(this.handleError); 

URLSearchParamsは、フォームのparamsパラメータとパイプがdimiss私のためにこの仕事を正規化しました。 これがあなたの問題を解決することを願っています。

Answer 4

だけangularjs http module

import { 
    isArray, 
    forEach, 
    isObject, 
    isDate, 
    isFunction, 
    isUndefined, 
    isNumber, 
} from 'lodash'; 

function toJsonReplacer(key, value) { 
    let val = value; 

    if (
    typeof key === 'string' && 
    key.charAt(0) === '$' && 
    key.charAt(1) === '$' 
) { 
    val = undefined; 
    } 

    return val; 
} 

function toJson(obj, pretty = undefined) { 
    if (isUndefined(obj)) return undefined; 
    if (!isNumber(pretty)) { 
    pretty = pretty ? 2 : null; // tslint:disable-line no-parameter-reassignment 
    } 
    return JSON.stringify(obj, toJsonReplacer, pretty); 
} 

function serializeValue(v) { 
    if (isObject(v)) { 
    return isDate(v) ? v.toISOString() : toJson(v); 
    } 
    return v; 
} 

function forEachSorted(obj, iterator, context = null) { 
    const keys = Object.keys(obj).sort(); 
    for (let i = 0; i < keys.length; i += 1) { 
    iterator.call(context, obj[keys[i]], keys[i]); 
    } 
    return keys; 
} 

/** 
* This method is intended for encoding *key* or *value* parts of query component. We need a custom 
* method because encodeURIComponent is too aggressive and encodes stuff that doesn't have to be 
* encoded per http://tools.ietf.org/html/rfc3986: 
* query   = *(pchar/"/"/"?") 
* pchar   = unreserved/pct-encoded/sub-delims/":"/"@" 
* unreserved = ALPHA/DIGIT/"-"/"."/"_"/"~" 
* pct-encoded = "%" HEXDIG HEXDIG 
* sub-delims = "!"/"$"/"&"/"'"/"("/")" 
*     /"*"/"+"/","/";"/"=" 
*/ 
function encodeUriQuery(val, pctEncodeSpaces = undefined) { 
    return encodeURIComponent(val) 
    .replace(/%40/gi, '@') 
    .replace(/%3A/gi, ':') 
    .replace(/%24/g, '$') 
    .replace(/%2C/gi, ',') 
    .replace(/%3B/gi, ';') 
    .replace(/%20/g, pctEncodeSpaces ? '%20' : '+'); 
} 

export function jQueryLikeParamSerializer(params) { 
    if (!params) return ''; 
    const parts = []; 
    serialize(params, '', true); 
    return parts.join('&'); 

    function serialize(toSerialize, prefix, topLevel = undefined) { 
    if (isArray(toSerialize)) { 
     forEach(toSerialize, (value, index) => { 
     serialize(value, prefix + '[' + (isObject(value) ? index : '') + ']'); 
     }); 
    } else if (isObject(toSerialize) && !isDate(toSerialize)) { 
     forEachSorted(toSerialize, (value, key) => { 
     serialize(
      value, 
      prefix + (topLevel ? '' : '[') + key + (topLevel ? '' : ']'), 
     ); 
     }); 
    } else { 
     if (isFunction(toSerialize)) { 
     toSerialize = toSerialize(); // tslint:disable-line no-parameter-reassignment 
     } 
     parts.push(
     encodeUriQuery(prefix) + 
      '=' + 
      (toSerialize == null 
      ? '' 
      : encodeUriQuery(serializeValue(toSerialize))), 
    ); 
    } 
    } 
} 

からの相対コードをコピー