美元.Ajax在不需要时进行重定向


$.ajax is redirecting when not wanted

我是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...

这将阻止元素的默认动作执行。