Question

我正在通过AJAX使用POST请求发送一些表单数据。当我控制台要在AJAX中发送的数据时，它包含我想要的整个对象。当我去查看我在服务器端收到的消息时，它丢失了对象的某些部分，数据似乎也被分成了几个部分。我不确定发送和接收的内容之间为什么没有联系。

表单部分的一些相关HTML

    <form method='POST' action='/' id='submitText' enctype="multipart/form-data">
        <textarea name='csv' id='text' form='submitCSV'></textarea>
        <br>
        <button type='submit'>Convert to CSV</button>
    </form>

这是我的AJAX电话

$(document).ready(function () {
    //your code here
    $('#submitText').on('submit', event => {
        event.preventDefault();
        let formData = $('#submitText :input').val();
 
        $.ajax({
            url: 'http://localhost:3000/',
            type: 'POST',
            data: formData,
            processData: false,
        })
        .done(() => {
            console.log('successful');
        })
        .fail(() => {
            console.log('failed');
        })
    });
});

这是在AJAX代码中被淘汰的formData

{
    "firstName": "Joshie",
    "lastName": "Wyattson",
    "county": "San Mateo",
    "city": "San Mateo",
    "role": "Broker",
    "sales": 1000000,
    "children": [
    {
      "firstName": "Beth Jr.",
      "lastName": "Johnson",
      "county": "San Mateo",
      "city": "Pacifica",
      "role": "Manager",
      "sales": 2900000,
      "children": [
        {
          "firstName": "Smitty",
          "lastName": "Won",
          "county": "San Mateo",
          "city": "Redwood City",
          "role": "Sales Person",
          "sales": 4800000,
          "children": []
        },
        {
          "firstName": "Allen",
          "lastName": "Price",
          "county": "San Mateo",
          "city": "Burlingame",
          "role": "Sales Person",
          "sales": 2500000,
          "children": []
        }
      ]
    },
    {
      "firstName": "Beth",
      "lastName": "Johnson",
      "county": "San Francisco",
      "city": "San Francisco",
      "role": "Broker/Sales Person",
      "sales": 7500000,
      "children": []
    }
  ]
}

在服务器端（使用express），这是该POST路由的相关代码

app.post('/', (req, res) => {
    console.log(req.body);
    res.end();
})

这是我退出req.body

后得到的结果

{
    '{\n    "firstName": "Joshie"
    ,\n    "lastName": "Wyattson",\n    
    "county": "Sateo",\n    
    "role": "Broker",\n    
    "sales": 1000000,\n    
    "children": [\n    
        {\ateo",\n    
        "role": "Broker",
        \n    "sales": 1000000,
        \n    "children": [\n    
            {\
            ca",\n      
            "role": "Manager",\n      
            "sales": 2900000,\n      
            "chilca",\n            
            {\n          
            firstName": 
            "Smitty",\n          
            "lastName": "Won",\n     
            "county": "San Mateo",\n          
            "city": "Redwood City",\n          
            "role": "Sales Person",\n          
            "sales": 4800000,\n          
            "children": ': [ '' 
  ]

我想我的问题是这与我将数据发送到服务器的方式有关吗？还是我在服务器端接收数据的方式有问题吗？

Answer 1

$。ajax的默认内容类型为x-www-form-urlencoded，但您正在发送JSON，因此应设置适当的内容类型。

    $.ajax({
        url: 'http://localhost:3000/',
        type: 'POST',
        data: formData,
        contentType: 'application/json'
    })

通过AJAX向服务器发送POST请求时丢失数据

1 个答案: