前台两组json字符串怎么传

在前后端分离的Web开发模式中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，被广泛应用于前台与后台之间的数据传输，那么问题来了，如何在前台将两组JSON字符串传递给后台呢？下面将详细介绍这一过程。

准备阶段

我们需要明确传递JSON字符串的目的，前台传递JSON字符串是为了让后台处理相应的业务逻辑，在开始之前，我们需要准备好以下几样东西：

1、前端页面：包含用于输入数据、触发事件（如按钮点击）的HTML元素。

2、JavaScript代码：用于获取前端页面的数据，并将其组装成JSON字符串。

3、后端服务：用于接收前端传递的JSON字符串，并进行相应的处理。

编写前端代码

1、创建HTML元素

我们需要创建两个表单，分别用于输入两组数据，创建一个按钮用于触发提交事件。

<form id="form1">
  <input type="text" name="name1" placeholder="姓名">
  <input type="text" name="age1" placeholder="年龄">
</form>
<form id="form2">
  <input type="text" name="name2" placeholder="姓名">
  <input type="text" name="age2" placeholder="年龄">
</form>
<button id="submitBtn">提交</button>

2、编写JavaScript代码

我们需要编写JavaScript代码，用于在按钮点击事件触发时，获取表单数据并组装成JSON字符串。

document.getElementById('submitBtn').addEventListener('click', function() {
  // 获取第一个表单的数据
  var form1Data = {
    name: document.querySelector('#form1 input[name="name1"]').value,
    age: document.querySelector('#form1 input[name="age1"]').value
  };
  // 获取第二个表单的数据
  var form2Data = {
    name: document.querySelector('#form2 input[name="name2"]').value,
    age: document.querySelector('#form2 input[name="age2"]').value
  };
  // 将两组数据组装成JSON字符串
  var jsonStr1 = JSON.stringify(form1Data);
  var jsonStr2 = JSON.stringify(form2Data);
  // 调用函数发送数据
  sendData(jsonStr1, jsonStr2);
});

发送数据到后台

前台两组json字符串怎么传

1、使用XMLHttpRequest发送数据

我们可以使用XMLHttpRequest对象发送异步请求，将JSON字符串传递给后台。

function sendData(jsonStr1, jsonStr2) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submitData', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，处理返回结果
      console.log(xhr.responseText);
    }
  };
  // 将两组JSON字符串作为一个对象发送
  var data = {
    jsonStr1: jsonStr1,
    jsonStr2: jsonStr2
  };
  xhr.send(JSON.stringify(data));
}

2、后端接收数据

在后端，我们需要一个接口来接收前端发送的JSON字符串，以下是一个简单的Node.js示例：

const express = require('express');
const app = express();
app.use(express.json());
app.post('/api/submitData', (req, res) => {
  // 获取前端发送的数据
  const { jsonStr1, jsonStr2 } = req.body;
  // 解析JSON字符串为JavaScript对象
  const data1 = JSON.parse(jsonStr1);
  const data2 = JSON.parse(jsonStr2);
  // 处理业务逻辑
  // ...
  // 返回结果
  res.send('Data received successfully');
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});