Поэтому я пытаюсь создать приложение для чата, и я знаю, что люди уже задавали этот вопрос, но, похоже, это не решает мою проблему.
Я уже пытался добавить функцию 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 вау в базе данных и т. Д.
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). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.