Итак, я пытаюсь создать приложение для чата, и я знаю, что люди уже задавали этот вопрос, но, похоже, это не решает мою проблему.
Я уже пытался добавить функцию beforeSend
, но, похоже, это не решило проблему.
HTML-код:
<form method="post" id="message_form" action="insert_msg.php">
<textarea placeholder="Type your message..." style="width: 550px;" id="messagea" name="messagea"></textarea>
<div id="galilei">
<button class="msg_send_btn" type="submit" name="send_msg" onclick="ref(); SubmitFormData();"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</form>
Код Ajax:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#msg_history').load('msg_history.php');
}, 500);
});
function ref() {
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setTimeout(function() {
$('#message_form').load('form.php');
}, 500);
});
}
function scroll() {
$(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
return false;
}
function SubmitFormData() {
var frm = $('#message_form');
frm.submit(function (ev) {
$.ajax({
method:"POST",
url:"insert_msg.php",
data: frm.serialize(),
beforeSend: function(){
$('#galilei').html("Ajax Request is Processing!");
},
success: function (data) {
}
});
ev.preventDefault();
});
}
Я ожидал, что он не будет дублироваться, например, я могу сказать «Привет», и он хранит только 1 «Привет» в базе данных. Но когда я отправляю сообщение, скажите «Привет». он, как обычно, сохраняет в базе данных 1 «Hello». Но, когда я отправляю другое сообщение, скажем "Вау", в базе данных хранятся 2 сообщения Wow и т. Д.
2 ответа
Либо сохранить действие, либо нажать кнопку.
Если вы продолжаете нажимать, измените тип на кнопку. Это должно решить проблему
Удалите onclick
вашего html, чтобы он выглядел так:
<form method="post" id="message_form" action="insert_msg.php">
<textarea placeholder="Type your message..." style="width: 550px;" id="messagea" name="messagea"></textarea>
<div id="galilei">
<button class="msg_send_btn" type="submit" name="send_msg"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
</div>
</form>
И измени свой JS на это:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#msg_history').load('msg_history.php');
}, 500);
});
$(document).on('submit', '#message_form', function(e) {
e.preventDefault();
var frm = $(this);
$.ajax({
method:"POST",
url:"insert_msg.php",
data: frm.serialize(),
beforeSend: function(){
$('#galilei').html("Ajax Request is Processing!");
},
success: function (data) {
$('#message_form').load('form.php');
}
});
});
function scroll() {
$(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
return false;
}
}
Объяснение Мы добавляем в документ слушателя, который будет прослушивать событие отправки формы и перехватывать его. Затем мы отправляем эти данные с помощью ajax. Только после этого мы снова отображаем форму. Я бы лично не удалял форму из DOM, а просто скрывал ее, например:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#msg_history').load('msg_history.php');
}, 500);
});
$('#message_form').on('submit', function(e) {
e.preventDefault();
var frm = $(this);
var message = $('<div>Ajax Request is Processing!</div>');
$.ajax({
method:"POST",
url:"insert_msg.php",
data: frm.serialize(),
beforeSend: function(){
frm.hide();
frm.insertAfter(message);
},
success: function (data) {
message.remove();
frm.show();
}
});
});
function scroll() {
$(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
return false;
}
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.
SubmitFormData()
. Каждый слушатель отправит свой запрос. Простое исправление - не вызывать его вonclick
, а вызывать его только один раз при загрузке страницы.