Angular2 - Http POST अनुरोध पैरामीटर

Question 1

मैं एक पोस्ट अनुरोध बनाने की कोशिश कर रहा हूं, लेकिन मैं इसे काम नहीं कर सकता:

testRequest() {
      var body = 'username=myusername?password=mypassword';
      var headers = new Headers();
      headers.append('Content-Type', 'application/x-www-form-urlencoded');

      this.http
        .post('/api',
          body, {
            headers: headers
          })
          .subscribe(data => {
                alert('ok');
          }, error => {
              console.log(JSON.stringify(error.json()));
          });
}

मैं मूल रूप से इस http अनुरोध (ajax नहीं) को दोहराना चाहता हूं जैसे कि यह HTML फॉर्म द्वारा उत्पन्न किया गया था:

URL: / एपी

Params: उपयोगकर्ता नाम और पासवर्ड

Question 2

मुझे लगता है कि application/x-www-form-urlencodedसामग्री प्रकार के लिए शरीर सही नहीं है । आप इसका उपयोग करने की कोशिश कर सकते हैं:

var body = 'username=myusername&password=mypassword';

आशा है कि यह आपकी मदद करता है, थियरी

Question 3

Angualar 4.3+ के लिए अपडेट करें

अब हम HttpClientइसके बजाय उपयोग कर सकते हैंHttp

गाइड यहाँ है

नमूना कोड

const myheader = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
let body = new HttpParams();
body = body.set('username', USERNAME);
body = body.set('password', PASSWORD);
http
  .post('/api', body, {
    headers: myheader),
  })
  .subscribe();

पदावनत

या आप इस तरह कर सकते हैं:

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
let body = urlSearchParams.toString()

अद्यतन अक्टूबर / 2017

से angular4 + , हम की जरूरत नहीं है headers, या .toString()सामान। इसके बजाय, आप नीचे दिए गए उदाहरण की तरह कर सकते हैं

import { URLSearchParams } from '@angular/http';

POST / PUT विधि

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
this.http.post('/api', urlSearchParams).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

GET / DELETE विधि

    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', username);
    urlSearchParams.append('password', password);
    this.http.get('/api', { search: urlSearchParams }).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
    )

JSON application/jsonसामग्री-प्रकार के लिए

this.http.post('/api',
      JSON.stringify({
        username: username,
        password: password,
      })).subscribe(
      data => {
        alert('ok');
      },
      error => {
        console.log(JSON.stringify(error.json()));
      }
      )

Question 4

Angular2 के बाद के संस्करणों में मैन्युअल रूप से Content-Typeहेडर सेट करने और शरीर को एन्कोडिंग करने की कोई आवश्यकता नहीं है यदि आप सही प्रकार के ऑब्जेक्ट को पास करते हैं body।

आप बस यह कर सकते हैं

import { URLSearchParams } from "@angular/http"


testRequest() {
  let data = new URLSearchParams();
  data.append('username', username);
  data.append('password', password);

  this.http
    .post('/api', data)
      .subscribe(data => {
            alert('ok');
      }, error => {
          console.log(error.json());
      });
}

इस तरह कोणीय आपके लिए शरीर को एन्कोड करेगा और सही Content-Typeहेडर सेट करेगा ।

भूल नहीं पी एस क्या आयात करने के लिए URLSearchParamsसे @angular/httpया यह काम नहीं करेगा।

Question 5

तो बस इसे पूरा जवाब देने के लिए:

login(username, password) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        let urlSearchParams = new URLSearchParams();
        urlSearchParams.append('username', username);
        urlSearchParams.append('password', password);
        let body = urlSearchParams.toString()
        return this.http.post('http://localHost:3000/users/login', body, {headers:headers})
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                console.log(response);
                var body = response.json();
                console.log(body);
                if (body.response){
                    let user = response.json();
                    if (user && user.token) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('currentUser', JSON.stringify(user)); 
                    }
                }
                else{
                    return body;
                }
            });
    }

Question 6

ये उत्तर Http के बजाय HttpClient का उपयोग करने वालों के लिए सभी पुराने हैं। मैं यह सोचकर पागल होने लगा था, "मैंने URLSearchParams का आयात कर लिया है, लेकिन यह अभी भी .toString () और स्पष्ट हेडर के लिए काम नहीं करता है!"

HttpClient के साथ, URLSearchParams के बजाय HttpParams का उपयोग करें और body = body.append()शरीर में एक से अधिक पैरा प्राप्त करने के लिए वाक्यविन्यास पर ध्यान दें क्योंकि हम एक अपरिवर्तनीय वस्तु के साथ काम कर रहे हैं:

login(userName: string, password: string): Promise<boolean> {
    if (!userName || !password) {
      return Promise.resolve(false);
    }

    let body: HttpParams = new HttpParams();
    body = body.append('grant_type', 'password');
    body = body.append('username', userName);
    body = body.append('password', password);

    return this.http.post(this.url, body)
      .map(res => {
        if (res) {          
          return true;
        }
        return false;
      })
      .toPromise();
  }

Question 7

यदि कोई कोणीय संस्करण 4+ से संघर्ष कर रहा है (मेरा 4.3.6 था) । यह नमूना कोड था जो मेरे लिए काम करता था।

पहले आवश्यक आयात जोड़ें

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

फिर एपीआई समारोह के लिए। यह एक लॉगिन नमूना है जिसे आपकी आवश्यकताओं के अनुसार बदला जा सकता है।

login(username: string, password: string) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', username);
    urlSearchParams.append('password', password);
    let body = urlSearchParams.toString()

    return this.http.post('http://localhost:3000/api/v1/login', body, {headers: headers})
        .map((response: Response) => {
            // login successful if user.status = success in the response
            let user = response.json();
            console.log(user.status)
            if (user && "success" == user.status) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user.data));
            }
        });
}

Question 8

मुझे कई मापदंडों का उपयोग करके हर दृष्टिकोण के साथ समस्या हो रही थी, लेकिन यह एकल ऑब्जेक्ट के साथ काफी अच्छी तरह से काम करता है

एपीआई:

    [HttpPut]
    [Route("addfeeratevalue")]
    public object AddFeeRateValue(MyValeObject val)

कोणीय:

var o = {ID:rateId, AMOUNT_TO: amountTo, VALUE: value};
return this.http.put('/api/ctrl/mymethod', JSON.stringify(o), this.getPutHeaders());


private getPutHeaders(){
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new RequestOptions({
        headers: headers
        , withCredentials: true // optional when using windows auth
    });
}

Question 9

angular: 
    MethodName(stringValue: any): Observable<any> {
    let params = new HttpParams();
    params = params.append('categoryName', stringValue);

    return this.http.post('yoururl', '', {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      params: params,
      responseType: "json"
    })
  }

api:   
  [HttpPost("[action]")]
  public object Method(string categoryName)

Question 10

मैं यहां उतरा जब मैं एक समान काम करने की कोशिश कर रहा था। किसी एप्लिकेशन / x-www-form-urlencoded सामग्री प्रकार के लिए, आप इसे शरीर के लिए उपयोग करने का प्रयास कर सकते हैं:

var body = 'username' =myusername & 'password'=mypassword;

आपके द्वारा शरीर को सौंपे गए मूल्य को करने की कोशिश के साथ एक स्ट्रिंग होगी।