当前位置: 首页 > news >正文

$.ajax的contentType设置及对应后端数据获取方式

在使用 jQuery 的 $.ajax 方法进行 HTTP 请求时,contentType 参数用于指定发送到服务器的数据的编码类型。常见的 contentType 设置包括 'application/json''application/x-www-form-urlencoded; charset=UTF-8'。以下是对这两种 contentType 的详细对比和说明:

1. contentType: 'application/json'

用途
• 用于发送 JSON 格式的数据。

特点
数据格式:发送的数据是纯 JSON 字符串。
HTTP 头部Content-Type 被设置为 'application/json',告知服务器请求体的格式为 JSON。
适用场景:适用于需要传输复杂数据结构(如嵌套对象、数组等)的场景,通常与 RESTful API 一起使用。

示例代码

```javascript
 $.ajax({
                url: '/login',
                type: 'POST',
                data: JSON.stringify({
                	username:"Lily",
                	password:"123456"}),
                contentType: 'application/json',
                dataType: 'json',
                success: ...
          })

服务器端处理
• 服务器需要能够解析 JSON 格式的数据。例如,在servlet 中使用 fastjson进行解析:

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应内容类型
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        // 读取请求体中的JSON数据
        StringBuilder sb = new StringBuilder();
        try (BufferedReader reader = request.getReader()) {
            String line;
            while ((line = reader.readLine()) != null) {
                sb.append(line);
            }
        }
        // 使用Fastjson解析JSON数据
        LoginRequest loginRequest = JSON.parseObject(sb.toString(), LoginRequest.class);//LoginRequest类符合javabean要求,包含字段分别为username和password
        // 或者,如果不确定JSON结构,可以使用JSONObject
        // JSONObject jsonObject = JSON.parseObject(sb.toString());
        // String username = jsonObject.getString("username");
        // String password = jsonObject.getString("password");

        // 获取用户名和密码
        String username = loginRequest.getUsername();
        String password = loginRequest.getPassword();

2. contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

用途
• 用于发送 URL 编码的表单数据。

特点
数据格式:发送的数据是 URL 编码的字符串,类似于 key1=value1&key2=value2
默认发送方式:contentType不设置时,默认为此方式。
HTTP 头部Content-Type 被设置为 'application/x-www-form-urlencoded; charset=UTF-8',告知服务器请求体的格式为 URL 编码的表单数据。
适用场景:适用于简单的键值对数据传输,尤其是与传统的 HTML 表单提交兼容的场景。

示例代码

$.ajax({
                url: '/login',
                type: 'POST',
                data: {
                	username:"Lily",
                	password:"123456"},
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                dataType: 'json',
                success:...
                })

服务器端处理
• 服务器需要能够解析 URL 编码的数据。例如,在 servlet中使用 request.getParameter直接获取:

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private UserService userService = new UserService();
    public LoginServlet() {
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置请求和响应的字符编码为UTF-8
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        ...
        }

对比总结

特性application/jsonapplication/x-www-form-urlencoded; charset=UTF-8
数据格式JSON 字符串URL 编码的键值对
使用场景复杂数据结构、RESTful API简单键值对、传统表单提交
服务器解析需要支持 JSON 解析的中间件或库需要支持 URL 编码解析的中间件或库
兼容性现代 API 广泛支持传统 Web 表单广泛支持
编码通常为 UTF-8明确指定为 UTF-8

选择建议

使用 application/json
• 当需要传输复杂的数据结构(如嵌套对象、数组)时。
• 当与 RESTful API 通信,且 API 期望接收 JSON 格式的数据时。

使用 application/x-www-form-urlencoded; charset=UTF-8
• 当传输简单的键值对数据时。
• 当需要与传统的 HTML 表单提交保持兼容时。

注意事项

  1. 数据序列化
    • 使用 application/json 时,需要手动将 JavaScript 对象序列化为 JSON 字符串,如 JSON.stringify(data)
    • 使用 application/x-www-form-urlencoded; charset=UTF-8 时,jQuery 会自动处理数据的 URL 编码。

  2. 服务器端解析
    • 确保服务器端能够正确解析所发送的数据格式。例如,使用适当的中间件或库来处理 JSON 或 URL 编码的数据。

  3. 跨域请求(CORS)
    • 如果涉及跨域请求,确保服务器设置了正确的 CORS 头部,以允许特定的 Content-Type

通过理解这两种 contentType 的区别和适用场景,可以根据具体需求选择最合适的选项,以实现高效和可靠的数据传输。

相关文章:

  • ViT、DETR 和 Swin Transformer :基于 Transformer 的计算机视觉(CV)模型
  • vmware tools灰化
  • Unity打包的WebGL包打不开问题解决方案,以及WebGL包嵌入至Vue2中的步骤
  • QT程序双击可执行文件运行方法
  • vue3 引入element-plus组件后,发现输入的时候没有提示,而且鼠标移到el-button显示unknown的简单解决方法
  • 【谷粒商城踩坑记】第四坑 nacos 闪退问题
  • python 库笔记:pytorch-tcn
  • vue的绑定
  • 单片机开发资源分析的实战——以STM32G431RBT6为例子的单片机资源分析
  • Zabbix—企业微信报警群通消息通知
  • Doris:联邦认证
  • 新安装的cursor安装不了插件
  • 2025-3-17 腾讯云-大数据方向-成都面试
  • JavaScript变量声明与DOM操作指南
  • Vue.js 插槽(Slot)详解:让组件更灵活、更强大
  • OracleCdc和MysqlCdc区别详解
  • Android Audio基础(53)——PCM逻辑设备Write数据
  • SpringCloud网关:Gateway路由配置与过滤器链
  • Visual Studio Code安装配置优化全攻略:打造高效开发环境
  • 在 Ubuntu 中配置 NFS 共享服务的完整指南
  • 郭继孚被撤销全国政协委员资格,此前为北京交通发展研究院长
  • 中办、国办印发《安全生产考核巡查办法》
  • 准80后湖北省财政厅副厅长徐晶华已调任襄阳市副市长
  • 外交部:美方应在平等、尊重和互惠的基础上同中方开展对话
  • 解放日报头版:人民城市共建共享展新卷
  • 我国成功发射卫星互联网低轨卫星