角度8：URL编码形式POST

2024-05-05 • 问答

我想将表单数据发布到接受并返回text / html / xml的服务器。我实际上是在尝试模仿普通的URL编码形式的POST。我的Angular 8 POST函数成功过帐（200 OK），但是服务器无法理解数据，因为它是JSON而不是URL编码。

响应和请求标头的状态为Content-Type: text/html; Charset=utf-8和accept: text/html,application/xhtml+xml,*/*，我已经在httpClient选项中添加了responseType: "text"。为什么仍然向服务器发送JSON而不是向URL编码的数据？

// obj2 = output from ngForm
// baseUrl2 = server that sends and receives text/html/xml

public postForm(obj2) {
    return this.httpClient
    .post(this.baseUrl2,obj2,{
        headers: new HttpHeaders({
            "Content-Type": "application/x-www-form-urlencoded",accept: "text/html,*/*"
        }),responseType: "text"
    })
    .map(data => data);
}

已发送表格数据：

{"Form data":{"{\"personsnameText\":\"name9\",\"centreEmailaddressText\":\"name9@name.com\",\"centreTelephoneNumberText\":123456789,\"centreNumberText\":\"ab123\",\"centreNameText\":\"ab123\",\"invoiceText\":\"123456789\",\"currencyText\":\"GBP\",\"amountText\":\"100\",\"cardtypeText\":\"Credit card\",\"commentsText\":\"Comments.\",\"declarationText\":true}":""}}

我想要什么：

personsnameText=name9?centreEmailaddressText=name9@name.com?centreTelephoneNumberText=123456789?centreNumberText=ab123?centreNameText=ab123?invoiceText=123456789?currencyText=GBP?amountText=100?cardtypeText=Credit card?commentsText=Comments.?declarationText=true

我不确定这里的obj2对象的类型，但是我认为它类似于

interface UserFormData {
  ['Form data']: { [name: string]: value };
}

您需要先将其转换为FormData，然后再发布。大致情况：

const formEncodedObj2 = new FormData();
const obj2Keys = obj2['Form data'];
Object.keys(obj2Keys).forEach(key => formEncodedObj2.append(key,obj2Keys[key]));

然后发送formEncodedObj2对象。

因此，此解决方案为我解决了各种问题：

使用Angular 8的表单和HttpClient发布x-www-form-urlencoded数据
更正不需要的编码字符
- 我的具体问题是，一个唯一的验证字符串包含要转换为HTML实体（即&至&）的“＆”号。

// userdata.service.ts

public postForm(obj) {
  return this.httpClient
    .post(this.baseUrl2,obj,{
      headers: new HttpHeaders({
        "Content-Type": "application/x-www-form-urlencoded","Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8","Referer": "http://referer.com" // Replace with your own.
      }),responseType: "text"
    })
    .map(data => data)
    .pipe(
      retry(1),catchError(this.handleError)
    );
}

// app.component.ts

PostForm(userdata) {
    // Stringify and convert HTML entity ampersands back to normal ampersands.
    const corrected = JSON.stringify(userdata).replace(/(&amp;)/gm,'&');
    // Convert back to JSON object.
    const corrected2 = JSON.parse(corrected);
    // entries() iterates form key:value pairs,URLSearchParams() is for query strings
    const URLparams = new URLSearchParams(Object.entries(corrected2));
    // Convert to string to post.
    const final = URLparams.toString();
    // Post it
    this.userdataService.postForm(final).subscribe(reponse2 => {
        console.log(reponse2);
    });
}

URLSearchParams()是突破，并且正如弗拉德（Vlad）建议的那样，绝对确定要处理的类型。我应该使用Types以避免混淆。我可能应该使用Angular Interceptors来处理字符操作。

角度8：URL编码形式POST

qqai22 回答：角度8：URL编码形式POST

大家都在问