ajax设置post请求不起作用(type和method)

本文描述了在页面信息保存过程中遇到的jQuery AJAX请求方法由method更改为type的问题,原因是不同版本的jQuery对这两个属性的支持不同。jQuery1.9以上版本支持method属性,而所有版本都支持type。

今天在做一个页面信息的保存的时候,为了方便从别的地方直接copy的了一段代码,如下:

$.ajax({
                        url : “user/save.do”,
                        method: 'POST',
                        contentType:'application/json',
                        data: JSON.stringify(data),
                        dataType:'json',
                        success:function(data){
                            layer.msg('保存成功!');
                            layer.closeAll();
                        },
                        error:function(e){
                            layer.msg('网络错误,请刷新后重试!');
                        }
                    });

这段代码再原来的地方一点问题都没有,但是到了新的页面,却怎么弄都是get求。经过仔细对比发现,两个地方使用的jQuery版本不一样,将method的属性,改为type之后就能正常使用了。

经过百度查找资料发现,jQuery1.9以上的版本才支持method属性,type则在jQuery的所有版本中都可以使用。

### 设置 AJAX POST 请求的 `responseType` 在前端使用 AJAX 发送 POST 请求时,若需接收非文本类型的数据(如二进制文件流、ArrayBuffer、Blob 等),应通过设置 `XMLHttpRequest` 对象的 `responseType` 属性来指定响应数据的类型。该属性应在调用 `open()` 方法之后、发送请求之前设置。 例如,若希望接收二进制文件流并将其转换为 Blob 对象以实现文件下载,可按如下方式配置请求: ```javascript const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/data', true); xhr.responseType = 'blob'; // 可选值:'', 'arraybuffer', 'document', 'json', 'text', 'stream' 等 xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { const blob = new Blob([xhr.response]); const downloadUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = downloadUrl; a.download = 'example.bin'; a.click(); URL.revokeObjectURL(downloadUrl); } }; xhr.send(JSON.stringify({ id: 1 })); ``` 在上述代码中,通过 `xhr.responseType = 'blob'` 指定了响应数据为 Blob 类型,并在请求成功后将其转换为可下载的文件流。该方法适用于需要处理文件下载、图片流等场景[^4]。 需要注意的是,若在请求设置了自定义请求头(如 `xhr.setRequestHeader('name', 'HaiMianBaoBao')`),则后端需在响应头中允许跨域请求头,例如: ```javascript response.setHeader('Access-Control-Allow-Headers', '*'); ``` 否则,跨域请求可能因请求头不被允许而失败[^2]。 ### 使用 Fetch API 设置 responseType 在现代浏览器中,也可以使用 `fetch` API 来实现类似功能。虽然 `fetch` 没有直接的 `responseType` 属性,但可以通过调用 `response.blob()`、`response.arrayBuffer()` 等方法处理响应数据: ```javascript fetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: 1 }) }) .then(response => response.blob()) .then(blob => { const downloadUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = downloadUrl; a.download = 'example.bin'; a.click(); URL.revokeObjectURL(downloadUrl); }); ``` 该方法在处理文件流、图片资源等二进制数据时更为简洁,并支持链式调用异步处理。 ### 总结 在 AJAX POST 请求设置 `responseType` 是控制响应数据格式的关键步骤,尤其在处理非文本响应时不可或缺。前端通过设置 `xhr.responseType` 或使用 `fetch` 的响应方法,可以灵活处理各种类型的数据,如 JSON、Blob、ArrayBuffer 等。同时,后端需正确配置响应头以支持跨域请求请求方法,确保请求能顺利执行[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值