Я пытаюсь научиться взаимодействовать с базой данных, используя node.js на серверной стороне и jQuery ajax на стороне клиента.
У меня есть базовая функция post, которая работает в первый разПользователь отправляет Данные.Однако всякий раз, когда пользователь отправляет дополнительные данные через браузер, они отправляются в виде нескольких дублированных строк в таблицу базы данных sql.Кроме того, каждый последующий раз, когда пользователь вводит данные, количество мультипликаторов увеличивается.Я не могу понять, почему это происходит.
Некоторый фон Я работаю с коллегами по всему миру, чтобы поделиться некоторыми лабораторными данными, используя вес мышей.Моя цель - чтобы мои коллеги зашли на сайт, представили основные данные для мыши и нажали кнопку.Страница не будет перезагружена, и предыдущие значения не сбрасываются, но пользователь может вручную очистить предыдущие значения, чтобы ввести другой набор данных.Это когда новый набор данных умножается на сообщение в sql.
Вот мой «рабочий» код:
jQuery для прослушивания события клика
// *********************************************
// Send Weights reference data to database
// *********************************************
$("#mouse_save").on("submit", function(e){
//don't reload page
e.preventDefault();
//define ajax request data obj
// Set Weights data object
let mouseObj = {};
mouseObj.ga = $('#mouse_age').val();
mouseObj.weight = $('#mouse_wt').val();
mouseObj.twin = $('#mouse_type option:selected').data('twin');
// get location data for submission
$.ajax({
url: "http://ip-api.com/json",
type: 'GET',
success: function(json)
{
mouseObj.country = json.countryCode;
mouseObj.city = json.city;
mouseObj.state = json.regionName;
},
error: function(err)
{
console.log("Geolocation Request failed, error= " + err);
}
}).done(function(response) {
//ajax call to save new Weights object in the db when geoloc is done
$.ajax({
url: '/weight/add',
type: 'POST',
data: mouseObj,
dataType: "json",
cache: false
});
console.log("Weights data to DB", mouseObj);
});
});
Бэкэнд Node.js для POST
// post user's reference data to the database
router.post('/weight/add', (req, res) => {
if (req.body){
var data = req.body;
var data_ga = req.body.ga;
var data_weight = req.body.weight;
var data_twin = req.body.twin;
var data_country = req.body.country;
var data_state = req.body.state;
var data_city = req.body.city;
console.log("Data added to weights DB:", data);
// insert statment
let sql = "INSERT INTO hemat.weightref (gestage, weight, twin, country, state, city) VALUES ('"+data_ga+"', '"+data_weight+"', '"+data_twin+"', '"+data_country+"', '"+data_state+"', '"+data_city+"')";
// execute the insert statment
connection.query(sql, function (err, results){
if (err) {
return console.error(err.message);
} else {
// get inserted id
console.log('Row insert Id:' + results);
}
});
res.end();
} else {
res.send("No data posted from client to send to DB");
}
});
В базе данных Вы можете видеть, что 1-я отправка работает нормально, но когда пользователь пытается представить другой набор данных, он дублируется.Если они попробуют третий набор, он будет утроен и т. Д.
РЕДАКТИРОВАТЬ, ЧТОБЫ ПОКАЗАТЬ ЖУРНАЛ КОНСОЛИ ВО ВРЕМЯ НАЖМИТЕ НА 2-Й КНОПКУ Я добавил несколько консольных журналов до, во время и в процессе отправки формы.Я приложил вывод ниже.Я вижу, что отправка формы вызывается только один раз за клик, но при втором (и последующих кликах) блок кода после e.preventDefault (который я использовал для предотвращения перезагрузки страницы) вызывается несколько раз.
Буду признателен за любую помощь, чтобы остановить несколько представлений при последующих нажатиях кнопок.