javascript - angularjs tutorial pdf




X-www-form-urlencoded का उपयोग करके POST को Angular2 को कैसे बाध्य करें (4)

मेरे पास एक प्रोजेक्ट है जिसमें पुराने, विरासत टॉमकैट 7 सर्वर को पोस्ट करने के लिए Angular2 (फाइनल) का उपयोग करने की आवश्यकता है ।jsp पृष्ठों का उपयोग करके कुछ हद तक REST-ish API प्रदान करना।

यह ठीक काम किया जब परियोजना AJAX अनुरोधों को पूरा करने वाला एक साधारण JQuery ऐप था। हालांकि, इस परियोजना का दायरा इतना बढ़ गया है कि इसे और अधिक आधुनिक ढांचे का उपयोग करके फिर से लिखना होगा। Angular2 नौकरी के लिए शानदार है, एक अपवाद के साथ: यह कुछ भी विकल्प का उपयोग करके POST अनुरोधों को करने से इंकार करता है, लेकिन फॉर्म-डेटा के रूप में, जिसे एपीआई नहीं निकालता है। एपीआई को सब कुछ urlencoded होने की उम्मीद है, जावा के request.getParameter("param") सिंटैक्स पर निर्भर करते हुए व्यक्तिगत फ़ील्ड निकालने के लिए।

यह मेरे user.service.ts से एक स्निप है:

import { Injectable }    from '@angular/core';
import { Headers, Response, Http, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
    private loggedIn = false;
    private loginUrl = 'http://localhost:8080/mpadmin/api/login.jsp';
    private headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});

    constructor(private http: Http) {}

    login(username, password) {
        return this.http.post(this.loginUrl, {'username': username, 'password':  password}, this.headers)
            .map((response: Response) => {
                let user = response.json();
                if (user) {
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }
            }
        );
    }
}

इससे कोई फर्क नहीं पड़ता कि मैं हेडर कंटेंट टाइप को किस तरह से सेट करता हूं, यह हमेशा गैर-एन्कोडेड फॉर्म-डेटा के रूप में समाप्त होता है। यह मेरे द्वारा स्थापित हेडर का सम्मान नहीं कर रहा है।

क्या किसी और का इससे सामना हुआ है? आप एक प्रारूप में Angular2 से POST डेटा के लिए मजबूर करने के बारे में कैसे जाते हैं, जिसे request.getParameter("param") का उपयोग करके एक पुराने जावा एपीआई द्वारा पढ़ा जा सकता है?

संपादित करें : भविष्य में इसे खोजने वाले किसी अन्य व्यक्ति के लिए, समाधान वास्तव में सरल है। पोस्ट की बॉडी को इस तरह सेट करें:

let body = `username=${username}&password=${password}`;`

नीचे ब्रैड का उदाहरण देखें।


आप URLSearchParams का उपयोग करके ऐसा कर सकते हैं क्योंकि अनुरोध और कोणीय का शरीर स्वचालित रूप से सामग्री प्रकार को application/x-www-form-urlencoded सेट करेगा और शरीर को ठीक से एनकोड करेगा।

let body = new URLSearchParams();
body.set('username', username);
body.set('password', password);

this.http.post(this.loginUrl, body).map(...);

वर्तमान में आपके लिए काम नहीं करने का कारण यह है कि आप शरीर के डेटा को सही प्रारूप में एन्कोडिंग नहीं कर रहे हैं और आप हेडर विकल्पों को सही तरीके से सेट नहीं कर रहे हैं।

आपको इस तरह से शरीर को एनकोड करना होगा:

let body = `username=${username}&password=${password}`;

आपको शीर्ष लेख विकल्प इस तरह सेट करने की आवश्यकता है:

this.http.post(this.loginUrl, body, { headers: headers }).map(...);

उन लोगों के लिए जो अभी भी एक उत्तर की तलाश में हैं, यह है कि मैंने इसे Angular 5 और HttpClient के साथ कैसे हल किया:

const formData = new FormData();

// append your data
formData.append('myKey1', 'some value 1');
formData.append('myKey1', 'some value 2');
formData.append('myKey3', true);

this.httpClient.post('apiPath', formData);

सामग्री-प्रकार शीर्षलेख सेट न करें, कोणीय आपके लिए इसे ठीक कर देगा!


मुझे इस मुद्दे पर कई घंटे काम करने के बाद इस समाधान का पता चला

login(userName: string, password: string) {
const headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append( 'No-Auth', 'True');

const body = new URLSearchParams();
body.set('username', userName);
body.set('password', password);
body.set('grant_type', 'password');

return this.http.post(
    this.baseUrl + '/token'
   , body.toString()
   , { headers: headers }
  )
  .pipe(map(res => res.json()))
  .pipe(map(res => {
    localStorage.setItem('auth_token', res.auth_token);
    return true;
  }))
  .pipe(catchError((error: any) => {
    return Observable.throw(error);
  }));

}


यह मेरे लिए कोणीय 7 के साथ काम किया है:

const payload = new HttpParams()
  .set('username', username)
  .set('password', password);

this.http.post(url, payload);

इस दृष्टिकोण के साथ हेडर को स्पष्ट रूप से सेट करने की आवश्यकता नहीं है।

ध्यान दें कि HttpParams ऑब्जेक्ट अपरिवर्तनीय है। इसलिए कुछ करने से निम्न कार्य नहीं होंगे, यह आपको एक खाली शरीर देगा:

const payload = new HttpParams();
payload.set('username', username);
payload.set('password', password);

this.http.post(url, payload);




angular