我是ajax的新手。我有几个HTML表,用户可以在其中更改信息,它更新数据库而无需重新加载页面,它第一次与这个完美的工作…
为了解释清楚,我的url是www.example.com/customers.php?action=viewAll
/************ Update Job Status ************/
$('.update-job-status').on('change', function() {
var status = $(this).val();
var id = $(this).parent().children('#id').val();
var formData = "id="+id+"&status="+status;
$.ajax({ // Start the PHP submission
url : "/resources/submit.php?action=updateJobStatus",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR) { //data - response from server
$('.notification-success').css('display', 'block').append('Status was updated!');
$('.notification-success').fadeOut(2000, function(){
$(this).empty();
});
}
});
});
AJAX返回并保持我们在同一页面(www.example.com/jobs.php?action=viewAll
)
现在我尝试调用AJAX对表执行不同的操作…
/************ Delete Job ************/
$('.delete-job').on('click', function() {
var id = $(this).parent().children('#id').val();
var formData = "id="+id;
$.ajax({ // Start the PHP submission
url : "/resources/submit.php?action=deleteJob",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR) { //data - response from server
}
});
});
这里AJAX返回给我们只是jobs.php
。为什么所有的$_GET参数都被截断了?我认为这是因为URL栏显示.../jobs.php?
(它仍然有问号)
你知道为什么它不维护它的页面吗?
没有type
属性的button
元素被视为form
中的submit
元素。发生的事情是,在点击时,AJAX被提交了,但是表单也被提交了,因此重新加载了页面。
<button type="button" class="delete-job">Delete</button>
如果整个页面正在重新加载,则可能是触发了'delete-job'元素的默认操作。试着修改这段代码:
$('.delete-job').on('click', function(e) {
e.preventDefault();
the rest of your code...
这将阻止元素的默认动作执行。