When I try to send form data using a POST request via AJAX, I am encountering an issue. The data being sent seems complete when I console it in the AJAX call, but on the server side, parts of the object appear to be missing and the data is getting cut off. It's puzzling why there's this discrepancy between what was sent and what was received.
Here is some relevant HTML for the form section:
<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>
This is my AJAX call:
$(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');
})
});
});
This is the formData being displayed in the AJAX code:
{
"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": []
}
]
}
On the server side (using express) this is the relevant code for that POST route:
app.post('/', (req, res) => {
console.log(req.body);
res.end();
})
Here is how req.body appears when consoling it out:
{
'{\n "firstName": "Joshie"\n ,\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": ': [ ''
]
I'm unsure if the issue lies with how I'm sending the data to the server or how I'm receiving it on the server side. Any insights would be appreciated.