首页 > 解决方案 > 如何在angular 4中将json数据构建为formdata

问题描述

如何将以下 json 作为表单数据发送?试过 JSON.stringify 并且它不起作用。

{
   name: 'starwars',
   year: 1977,
   data: [{ 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
  { 
    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e', 
    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1', 
    'qty': '1' 
  },
 ],
}

标签: javascriptangular

解决方案


import { Injectable, OnInit } from '@angular/core'
import { Http, Headers, URLSearchParams, RequestOptions } from '@angular/http'
import { Observable, Subject } from 'rxjs/Rx'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'

@Injectable()
export class YifyMoviesProvider {
    constructor(public http: Http) {

    }
    postData(): Observable < any > {
        let jsonData = {
            name: 'starwars',
            year: 1977,
            data: [{
                    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e',
                    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1',
                    'qty': '1'
                },
                {
                    'id': 'c5f6d301-328e-4167-8e13-504afb9a030e',
                    'item': 'bc4db36e-9e7c-478d-93a2-d4be32dacec1',
                    'qty': '1'
                },
            ],
        };
        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json' })
        let options = new RequestOptions({
            headers: headers
        })
        let body = new URLSearchParams()
        body.set('mydata', JSON.stringify(jsonData))
        return this.http.post(`yourip`, body, options).
        map(res => res.json())
        .catch((error: any) => {
            return Observable.throw(new Error(error.status))
        })
    }
}

如果您想将 json 数据作为表单数据发布到 Rest api,这将在 Angular 4 中工作!


推荐阅读