Angular中如何实现一个长尾词的POST请求处理示例？

本文共计625个文字，预计阅读时间需要3分钟。

前言：项目angular中使用jQuery请求，想替换为angular自身请求，结果发现后台无法获取参数，以下进行资料分析并做总结。

步骤：

1. 首先明确，angular和jQuery中的请求方式不同。jQuery通常使用$.ajax()或$.get()、$.post()等方法进行请求，而angular则使用HttpClient模块。

2. 分析原因： - jQuery请求时，参数会直接拼接到URL后面，而angular请求时，参数会放在请求体中。 - 后台可能只处理了jQuery的请求方式，未对angular的请求方式进行适配。

3. 解决方案： - 在angular中，可以使用HttpClient模块的post方法，将参数放在请求体中发送。 - 修改后台代码，使其能够处理angular请求体中的参数。

总结：

- angular和jQuery的请求方式不同，需要根据实际情况进行适配。- 在angular中，使用HttpClient模块进行请求时，需要将参数放在请求体中。- 后台需要根据请求方式处理参数，确保能够接收到正确的数据。

前言

项目angular中使用jQuery请求，想替换为angular自身请求，结果发现后台没法获取參数，所以，查询资料分析一下，做个总结。

步骤如下：

首先，angular和jQuery中请求是不同的。如下：

• jQuery：
  

请求contentType是：

application/x-www-form-urlencoded; charset=UTF-8

该类型数据被编码成以 '&' 分隔的键-值对, 同时以 '=' 分隔键和值. 非字母或数字的字符会被百分比编码: 这也就是为什么这种类型不支持二进制数据(应使用 multipart/form-data 代替)。

data参数是处理过的：

// json对象 { a : 3, b : 2 } // 将json对象处理为 "a=3&b=2"

• Angular：
  

请求contentType:

application/json

data参数：

// json对象 {a: 3,c: 2}

综上来看，angular提交后台是json，不是表单数据。我们需要把json对象转换为参数拼接，提交后台时就是表单数据了：

/** * 将application/json转换为application/x-www-form-urlencoded * @param data */ handlerPostParams(data) { const params = []; for (const key in data) { if (data[key] && !isNull(data[key])) { if (data[key] instanceof Array) { for (let i = 0; i < data[key].length; i++) { if (data[key][i] && !isNull(data[key][i])) { const value = data[key][i]; const name = key + '[' + i + ']'; const innerObj = {}; innerObj[name] = value; params.push(this.handlerPostParams(innerObj)); } } } else if (data[key] instanceof Object) { for (const k in data[key]) { if (data[key][k] && !isNull(data[key][k])) { const value = data[key][k]; const name = key + '[' + k + ']'; const innerObj = {}; innerObj[name] = value; params.push(this.handlerPostParams(innerObj)); } } } else { const param = encodeURIComponent(key) + '=' + encodeURIComponent(data[key]); params.push(param); } } } return params.join('&'); }

总结

到此这篇关于angular中post请求处理的文章就介绍到这了,更多相关angular post请求处理内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！