Question

这部分代码应该向预定义的url（包括变量）发送get请求;然后刷新页面上的数据表。

然而，它只是刷新页面 - 我的服务器无法收到所声明URL的get请求。怎么能让这个工作？

$(".ajaxAction").on("click",function (event) {
    var ajaxActionUrl = $(this).data("actionUrl");
    var ajaxActionQuery = $.get({type:"GET", url:ajaxActionUrl, success:function () {
        order_table.ajax.url(ajaxTableUrl).load();
    }});
    event.preventDefault();
})

编辑：我的HTML实际上是一个Jinja模板，我的JS文件如下：

$(document).ready(function(){main()})

function main(){
    ajaxTableUrl = $('#initial_table').data("tableLinkedTo")
    $(".container").hide();
    $("#OrderUI").show();
    $("#order_button").parent().css("backgroundColor","#f5f5f5");
    $("#initial_table").parent().css("backgroundColor","yellow");
    $(".menu-tab").on("click",function(){
        $("li.hnav").removeAttr('style');
        $(this).parent().css("backgroundColor","#f5f5f5");
        $("#kinandonboard").parent().removeAttr('style');
        var linkedto = $(this).data("linkedto");
        $(".container").hide();
        $(linkedto).show()
        }
        );
    $("#kinandonboard").on("click",function(){
        $("#order_button").parent().css("backgroundColor","#f5f5f5");
    }
    );
    var order_table = $('#order_table').DataTable({
        retrieve: true,
        ajax : ajaxTableUrl,
        'bSort': false,
        "columns" : [{"data": "orderId"},
                     {"data": "companyName"},
                     {"data": "customerOrderRef"},
                     {"data": "orderPaid"},
                     {"data": "orderPrice"},
                     {"data": "orderDate"},
                     {"data": "requiredDate"},
                     {"data": "orderQuantity"},
                     {"data": "orderStage"},
                     {"data": "orderActions"},],
        "columnDefs": order_table_cols,
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         false,
        "searching": false
        }) ;
    $(".order-table-button").on("click",function(){
        $("li.vnav").removeAttr('style');
        $(this).parent().css("backgroundColor","yellow");
        ajaxTableUrl = $(this).data("tableLinkedTo");
        order_table.ajax.url(ajaxTableUrl).load()
        });
    $(".ajaxAction").on("click",function (event) {
        event.preventDefault();
        var ajaxActionUrl = $(this).data("actionUrl");
        var ajaxActionQuery = $.get({type:"GET", url:ajaxActionUrl, success:function () {
            order_table.ajax.url(ajaxTableUrl).load();
        }});
    })
}

Answer 1

order_table.ajax.url(ajaxTableUrl).load();出错，但由于您没有为此发布代码，我们无法分辨出错误。该行将破坏您的代码，因此，event.preventDefault();无法执行，导致表单提交显示为页面刷新。将其更改为：

$(".ajaxAction").on("click",function (event) {
    event.preventDefault();
    var ajaxActionUrl = $(this).data("actionUrl");
    var ajaxActionQuery = $.get({type:"GET", url:ajaxActionUrl, success:function () {
        order_table.ajax.url(ajaxTableUrl).load();
    }});
})

以便页面刷新停止，您可以在浏览器的错误日志控制台中看到order_table的错误。

Answer 2

尝试提供更多信息。基于这个微小的代码片段，很难让整体视图出错。理想情况下，还要附加此点击侦听器的相关HTML代码。

与此问题相关的最常见问题是：

jQuery未正确加载，请检查浏览器控制台是否有错误。
点击侦听器未触发，并且根本未调用even.preventDefault。检查您正在侦听的类是否正确，或者您是否正在侦听动态加载的元素。也许尝试在点击事件功能的开头添加一个console.log('click')。如果控制台中没有记录任何内容，您将知道在哪里搜索。

修改

根据您提供的代码，似乎数据表通过AJAX加载数据（正如我在 2 中描述的那样）。尝试将您的代码更改为：

＆＃13;
＆＃13;
$(document).on("click", ".ajaxAction", function (event) { var ajaxActionUrl = $(this).data("actionUrl"); var ajaxActionQuery = $.get({type:"GET", url:ajaxActionUrl, success:function () { order_table.ajax.url(ajaxTableUrl).load(); }}); event.preventDefault(); })
＆＃13;
＆＃13;
＆＃13;

Answer 3

我打赌你正在尝试将click事件附加到动态元素，因此它不存在。因此，您需要更改单击以使用事件委派。

$(".ajaxAction").on("click",function (event) {

到

$(document).on("click", ".ajaxAction" ,function (event) {

JQuery Ajax不会发送get请求，而是刷新页面

3 个答案: