How to transmit complex data to the frontend using Ajax?

2 years ago
Benjamin Taylor
2 minutes

There are several ways to transfer complex data to the front end using Ajax.

  1. Serialize to JSON string: Convert complex data objects into a JSON string, then transmit the JSON string to the front-end through an Ajax request. The front-end can use a JSON parsing library to convert the JSON string back into the corresponding complex data object.

Sample code: Assume there is a complex data object data, which can be converted to a JSON string using JSON.stringify(data), and then transmitted to the frontend through an Ajax request.

var data = { name: 'John', age: 20, address: { city: 'New York', country: 'USA' } };
var jsonData = JSON.stringify(data);

$.ajax({
  url: 'your-url',
  method: 'POST',
  data: jsonData,
  success: function(response) {
    // 处理响应数据
  },
  error: function(error) {
    // 处理错误
  }
});
  1. To utilize the FormData object: If you need to send complex form data (including file uploads), you can use the FormData object. The FormData object can serialize form data into key-value pairs and supports file uploads.

Sample code: Assuming there is a form called formData that contains complex data and file upload fields, you can use the FormData object to send the form data to the frontend.

var formData = new FormData();
formData.append('name', 'John');
formData.append('age', 20);
formData.append('file', inputFile.files[0]); // inputFile 是一个文件上传字段的 DOM 元素

$.ajax({
  url: 'your-url',
  method: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function(response) {
    // 处理响应数据
  },
  error: function(error) {
    // 处理错误
  }
});
  1. Using the XML format: If the front end needs to receive data in XML format, complex data objects can be converted to XML format and then transmitted to the front end through Ajax requests. The front end can use an XML parsing library to parse the XML data once it receives it.

Sample code: Suppose there is a complex data object ‘data’ that can be converted to XML format using a specific method, then transmitted to the front end through an Ajax request.

var xmlData = convertToXml(data); // convertToXml 是将复杂数据对象转换为 XML 格式的方法

$.ajax({
  url: 'your-url',
  method: 'POST',
  data: xmlData,
  success: function(response) {
    // 处理响应数据
  },
  error: function(error) {
    // 处理错误
  }
});

Here are several common ways to transmit complex data to the frontend, choose the appropriate method based on the specific requirements and how the frontend receives data.

bannerAds