JQuery Ajax赢得't发送get请求，而是刷新页面

JQuery Ajax won't send get request, refreshes page instead

本文关键字：请求 刷新 get 发送 赢得 Ajax JQuery      更新时间：2024-03-06

这段代码应该向预定义的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();
        }});
    })
}

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();
    }});
})

这样页面刷新就停止了，您可以在浏览器的错误日志控制台中查看ordertable的错误。

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

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

至

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

尝试提供更多信息。基于这个微小的代码片段，很难全面了解出了什么问题。理想情况下，还要附加此点击侦听器的相关HTML代码。

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

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

编辑

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

$(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();
})

相关文章：