后端接口接受数据的请求数据格式

Question

前端数据传入后端时以raw的json格式传回后端后，显示数据更新成功，但是并没有更新数据，但是以x-www-form-urlencoded格式传输可以进行事务更新，请问如何更改数据传输的格式

Answer 1

引自免费微信小程序：皆我百晓生

要解决这个问题，你需要在前端调整发送请求时的数据格式。默认情况下，如果你没有指定，大多数前端库会将数据转换为application/x-www-form-urlencoded格式。为了以JSON格式发送数据，你需要明确设置请求头（headers）并正确地序列化你的数据。

这里是一个使用JavaScript的Fetch API发送JSON数据的例子：

const data = {
  // 这里是你的数据对象
  key1: 'value1',
  key2: 'value2',
};

// JSON.stringify 将对象转换为JSON字符串
const jsonData = JSON.stringify(data);

fetch('http://your-backend-endpoint', {
  method: 'PUT' || 'POST', // 根据需求选择HTTP方法
  headers: {
    'Content-Type': 'application/json', // 设置请求头为JSON格式
  },
  body: jsonData, // 使用序列化的JSON数据作为请求体
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.finally(() => console.log('Request completed'));

这段代码首先创建了一个包含数据的对象，然后使用JSON.stringify将其转换为JSON字符串。接下来，在使用Fetch API发送请求时，我们设置了Content-Type头部为application/json，这告诉服务器我们将发送的是JSON格式的数据。最后，我们将JSON数据放入请求体（body）中。

如果你使用的是jQuery的$.ajax或者axios等其他库，设置方式也类似，主要就是确保在发送请求时设置正确的Content-Type头部为application/json。例如，使用axios的示例：

import axios from 'axios';

const data = {
  // 这里是你的数据对象
  key1: 'value1',
  key2: 'value2',
};

axios.put('http://your-backend-endpoint', data, {
  headers: {
    'Content-Type': 'application/json',
  },
})
.then(response => response.data)
.catch(error => console.error('Error:', error))
.finally(() => console.log('Request completed'));

在这个例子中，我们使用了axios的put方法，并通过第三个参数设置了请求头。其他库如jQuery的$.ajax也需要类似设置。

检查一下后端是否能正确处理JSON格式的请求，确认接收数据的方法和预期一致。如果后端没有问题，那么问题可能出在前端数据序列化或发送上。根据上述代码示例调整前端发送请求的部分，应该就能解决数据以JSON格式成功更新的问题。