所以我正在使用一个非常小的,非常简单的聊天应用程序,主要使用JQuery / AJAX。
这是我的HTML表单。
<form class="chat_form" method="post" id="chat_form" autocomplete="off">
<input class="form-control" type="text" name="chatMe" placeholder="Type here..." autocomplete="off">
<input type="submit" value="Submit" name="submit">
</form>
这是我的剧本:
<script type="text/javascript">
$('.chat_form').submit(function(){
$.ajax({
url: "runMe.cfm",
type: "POST",
data: $('.chat_form').serialize(),
success: function() {
$('.chat_form input').val('');
}
});
});
</script>
根据我的理解,应该将所有表单信息提交到我的操作页面然后清除输入 - 它确实如此。那部分工作正常。我正在收集数据。
但每当我提交表单时,整个页面都会重新加载,好像它忽略了我的代码的关键部分。
那部分的任何帮助?谢谢。
答案 0 :(得分:1)
默认情况下,您可以传播事件,您可能需要其中一个或两个:
e.preventDefault();
e.stopPropagation();
当您的对象调用submit()
时,它不会停在那里。之后它将调用默认值,因此您需要添加一个参数,然后执行以下调用:
$('.chat_form').submit(function(e){ // <- add parameter here
e.preventDefault();
e.stopPropagation();
$.ajax({
url: "runMe.cfm",
type: "POST",
data: $('.chat_form').serialize(),
success: function() {
$('.chat_form input').val('');
}
});
});
答案 1 :(得分:1)
您需要致电e.preventDefault()
才能通过javascript代码提交表单。
$('.chat_form').submit(function(e){
$.ajax({
url: "runMe.cfm",
type: "POST",
data: $('.chat_form').serialize(),
success: function() {
$('.chat_form input').val('');
}
});
e.preventDefault() // put that line of code here or on last line on success function
});
答案 2 :(得分:1)
解决方案1 :
添加e.preventDefault();
示例:
$('.chat_form').submit(function(e){
e.preventDefault();
//ajax code here
});
解决方案2
或者,在表单标记中添加少量javascript onsubmit="return false"
代码:
示例:
<form class="chat_form" method="post" id="chat_form" autocomplete="off" onsubmit="return false">