Ajax参数传递的几种常见方式

{"title":"Ajax参数传递的几种常见方式","content":"

做网页开发时，经常会遇到需要在不刷新页面的情况下获取或提交数据。这时候，Ajax 就派上用场了。而使用 Ajax，绕不开的一个环节就是参数传递。怎么把用户输入的内容、选择的条件，准确地传给后端？下面来看看几种常见的做法。

\n\n

GET 请求传参：拼接在 URL 上

\n

当你想从服务器获取数据，比如查个商品信息，用 GET 最合适。参数直接拼在 URL 后面，简单明了。

\n

$.ajax({\n  url: \'/api/product',\n  type: \'GET',\n  data: {\n    id: 123,\n    category: \'phone\'\n  },\n  success: function(res) {\n    console.log(res);\n  }\n});\n

\n

这段代码实际请求的地址是 /api/product?id=123&category=phone。后端通过解析查询字符串就能拿到参数。

\n\n

POST 请求传参：数据放在请求体里

\n

如果是提交表单、保存数据这类操作，一般用 POST。参数不会暴露在地址栏，更安全。

\n

$.ajax({\n  url: \'/api/save-user',\n  type: \'POST',\n  data: {\n    name: \'张三\',\n    age: 25,\n    email: \'zhangsan@example.com\'\n  },\n  success: function(res) {\n    alert(\'保存成功！\');\n  }\n});\n

\n

这里的 data 对象会自动序列化成表单格式（application/x-www-form-urlencoded），后端可以直接读取。

\n\n

发送 JSON 数据：前后端分离常用

\n

现在很多项目前端用 Vue 或 React，后端只提供接口。这时候通常要把参数以 JSON 格式发过去。

\n

$.ajax({\n  url: \'/api/update-profile',\n  type: \'POST',\n  contentType: \'application/json',\n  data: JSON.stringify({\n    nickname: \'小明同学\',\n    avatar: \'/images/1.jpg\'\n  }),\n  success: function(res) {\n    console.log(res.message);\n  }\n});\n

\n

注意这里用了 JSON.stringify 把对象转成字符串，并设置 contentType 为 JSON 类型，告诉后端该怎么解析。

\n\n

上传文件时的参数处理

\n

如果要上传头像，还得带上用户 ID，就得用 FormData 来组织数据。

\n

var formData = new FormData();\nformData.append(\'avatar\', fileInput.files[0]);\nformData.append(\'userId\', 888);\n\n$.ajax({\n  url: \'/api/upload-avatar',\n  type: \'POST',\n  data: formData,\n  processData: false,\n  contentType: false,\n  success: function(res) {\n    console.log(\'上传完成\');\n  }\n});\n

\n

关掉 processData 和 contentType 是为了让 jQuery 不去动 FormData 的原始结构。

\n\n

实际开发中，选哪种方式主要看场景。查数据用 GET，提数据用 POST，前后端分离就传 JSON，带文件就用 FormData。搞清楚每种方式的特点，用起来才顺手。

","seo_title":"Ajax参数传递的几种方式详解","seo_description":"介绍Ajax中GET、POST、JSON和FormData四种常见的参数传递方法，适合前端入门学习。","keywords":"ajax参数传递,ajax get请求,ajax post请求,ajax传json数据,ajax上传文件"}