AJAX/JQuery:提交表单和调用函数而不刷新页面
AJAX/JQuery: Submit form and call function without refreshing page
我正在尝试使用ajax/jquery提交一个由下拉菜单组成的表单,目的是根据表单输入显示来自MySQL数据库的信息。如果没有 ajax/jquery,页面可以正常运行。但是,我不希望在提交表单后刷新页面,以便所选下拉选项继续显示。我的 ajax/jquery 不是很好,我知道这是我遇到麻烦的地方。我的代码如下:
<script>
$(document).ready(funtion(){
var $form = $('form');
$form.submit(funtion(){
$.ajax({
type: "POST",
data: $(this).serialize(),
cache: false,
success: displayResults
});
});
});
</script>
函数displayResults是我想在提交表单时调用的函数,但截至目前,当我单击提交时,表单刷新并且不显示任何结果。任何帮助将不胜感激。提前谢谢。
<script>
$(document).ready(funtion(){
var $form = $('form');
$form.submit(funtion(e){
e.preventDefault();
$.ajax({
type: "POST",
data: $(this).serialize(),
cache: false,
success: displayResults
});
});
});
</script>
这会通过阻止事件触发来防止表单提交。在vanilla javascript中,你可以在提交时返回false,这将是相同的。
尝试这种方式提交表单并防止表单提交的默认行为,使用e.preventdefualt()
这将防止事件触发,要序列化表单数据使用serializeArray()
,使用success
和error
来调试ajax调用。
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
console.log(data); //display data Results
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log(errorThrown); // dispaly error
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#ajaxform").submit(); //Submit the FORM
.submit() 它将与使用提交按钮相同。您必须将按钮与单击事件一起使用。
<script>
$(document).ready(funtion(){
var data1 = $('#field1').val();
// the same with all the values
$('#button').click(function(){
$.ajax({
type: "POST",
data: ({dat1: data1} ),
cache: false,
success: function(data) {
displayResults();
}
});
});
});
</script>
相关文章:
- 停止对document.ready函数的重定向/刷新
- 刷新按钮以调用javascript函数
- j查询如何在加载了 load() 函数的页面上进行 POST/AJAX,而无需刷新页面
- 如何等到iframe刷新完成后再执行函数
- 如何使用AJAX函数在不刷新页面的情况下发送表单,我缺少什么?我必须为此使用休息框架吗?
- Javascript 函数在页面刷新时不可用
- onchange 函数需要时间来刷新页面
- 如何将数据从表单传递到 php 函数到 javascript 以在画布上绘制而不刷新页面
- 需要 Ajax 函数 - 在不刷新页面的情况下更新数据库
- 使用 Javascript 在页面刷新时调用函数
- 刷新函数未正确调用 d3
- AJAX/JQuery:提交表单和调用函数而不刷新页面
- 如何在不刷新页面的情况下多次执行构造函数
- 视图/控制器不会使用 push() 函数刷新,使用 angularjs 中的 socket.io
- 无法使用包含 url 变量的 javascript 函数刷新到页面底部
- 通过函数刷新/重新绘制数据表
- 聚合物计算函数刷新值
- Chrome不'不执行jquery函数刷新后,但当链接被点击
- PHP / AJAX函数刷新
- 在Angular 2 / Ionic 2中通过构造函数刷新数据