Fatal编程技术网
  • javascript/
  • Javascript 将动态值从AJAX传递到jQuery数据表中的自定义参数

Javascript 将动态值从AJAX传递到jQuery数据表中的自定义参数

javascript jquery ajax

Javascript 将动态值从AJAX传递到jQuery数据表中的自定义参数,javascript,jquery,ajax,datatable,Javascript,Jquery,Ajax,Datatable,我正在使用带有服务器端处理的dataTable。我想将令牌作为自定义参数发送到服务器。令牌由AJAX设置。在激发dataTable上的AJAX请求时，发送的令牌参数始终为null。我认为这是因为dataTable上的AJAX请求是在GetToken进程完成之前触发的。以下是我已经尝试过的方法 1。使用ajax.data function GetToken() { var token; $.get("/User/GetToken?_=" + new Date

我正在使用带有服务器端处理的dataTable。我想将令牌作为自定义参数发送到服务器。令牌由AJAX设置。在激发dataTable上的AJAX请求时，发送的令牌参数始终为null。我认为这是因为dataTable上的AJAX请求是在GetToken进程完成之前触发的。以下是我已经尝试过的方法

1。使用ajax.data

    function GetToken() {
        var token;
        $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
            token= token;
        });
        return token;
    }

    var dataTable = $('#dataTable').DataTable({
        serverSide: true,
        pagingType: 'full_numbers',
        scrollY: false,
        scrollX: true,
        sort: false,
        fixedColumns: true,
        autoWidth: true,
        language: {
            paginate: {
                first: "<<",
                previous: "<",
                next: ">",
                last: ">>",
            }
        },
        pageLength: 10,
        lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]],
        columns: [
                { "data": "Name", "autoWidth": true },
                { "data": "Address", "autoWidth": true },
                { "data": "Gender", "autoWidth": true },
        ],
        ajax: {
            url: '@Url.Action("LoadData", "Student")',
            type: 'POST',
            data: { token: GetToken() }
            dataSrc: "Data"
        }
    });
2。使用preXhr.dt

    var dataTable = $('#dataTable')
        .on('preXhr.dt', function (e, settings, data) {
            $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
                data.token = token;
            });
        })
        .DataTable({
            serverSide: true,
            pagingType: 'full_numbers',
            scrollY: false,
            scrollX: true,
            sort: false,
            fixedColumns: true,
            autoWidth: true,
            language: {
                paginate: {
                    first: "<<",
                    previous: "<",
                    next: ">",
                    last: ">>",
                }
            },
            pageLength: 10,
            lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]],
            columns: [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Address", "autoWidth": true },
                    { "data": "Gender", "autoWidth": true },
            ],
            ajax: {
                url: '@Url.Action("LoadData", "Student")',
                type: 'POST',
                dataSrc: "Data"
            }
        });

    var isTokenChange = false;
    var dataTable = $('#dataTable')
        .on('preXhr.dt', function (e, settings, data) {
            $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
                data.token= token;
                isTokenChange = true;
            });

            while(!isTokenChange) {

            }

            isTokenChange = false;
        })
        .DataTable({
            serverSide: true,
            pagingType: 'full_numbers',
            scrollY: false,
            scrollX: true,
            sort: false,
            fixedColumns: true,
            autoWidth: true,
            language: {
                paginate: {
                    first: "<<",
                    previous: "<",
                    next: ">",
                    last: ">>",
                }
            },
            pageLength: 10,
            lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]],
            columns: [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Address", "autoWidth": true },
                    { "data": "Gender", "autoWidth": true },
            ],
            ajax: {
                url: '@Url.Action("LoadData", "Student")',
                type: 'POST',
                dataSrc: "Data"
            }
        });
3。在preXhr.dt上添加延迟循环

    var dataTable = $('#dataTable')
        .on('preXhr.dt', function (e, settings, data) {
            $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
                data.token = token;
            });
        })
        .DataTable({
            serverSide: true,
            pagingType: 'full_numbers',
            scrollY: false,
            scrollX: true,
            sort: false,
            fixedColumns: true,
            autoWidth: true,
            language: {
                paginate: {
                    first: "<<",
                    previous: "<",
                    next: ">",
                    last: ">>",
                }
            },
            pageLength: 10,
            lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]],
            columns: [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Address", "autoWidth": true },
                    { "data": "Gender", "autoWidth": true },
            ],
            ajax: {
                url: '@Url.Action("LoadData", "Student")',
                type: 'POST',
                dataSrc: "Data"
            }
        });

    var isTokenChange = false;
    var dataTable = $('#dataTable')
        .on('preXhr.dt', function (e, settings, data) {
            $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
                data.token= token;
                isTokenChange = true;
            });

            while(!isTokenChange) {

            }

            isTokenChange = false;
        })
        .DataTable({
            serverSide: true,
            pagingType: 'full_numbers',
            scrollY: false,
            scrollX: true,
            sort: false,
            fixedColumns: true,
            autoWidth: true,
            language: {
                paginate: {
                    first: "<<",
                    previous: "<",
                    next: ">",
                    last: ">>",
                }
            },
            pageLength: 10,
            lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]],
            columns: [
                    { "data": "Name", "autoWidth": true },
                    { "data": "Address", "autoWidth": true },
                    { "data": "Gender", "autoWidth": true },
            ],
            ajax: {
                url: '@Url.Action("LoadData", "Student")',
                type: 'POST',
                dataSrc: "Data"
            }
        });
对于第三种方法，它是可行的，但我认为这不是一个好的解决方案。我的问题是，在收到令牌之前，保持或延迟datatable上的ajax请求是什么好的解决方案？

在这种情况下，您不想执行异步请求，所以不要使用$。请尝试类似的方法（async:false）：

在这种情况下，您不希望执行异步请求，因此请不要使用$.get，请尝试以下操作（async:false）：

只有在接收到触发datatable初始化的令牌时，才能链接调用

function GetToken() {
    var token;
    $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
        initializeTable(token);
    });
}

initializeTable(token){
// Here initialize ur data table with the passed token.
}
只有在接收到触发datatable初始化的令牌时，才能链接调用

function GetToken() {
    var token;
    $.get("/User/GetToken?_=" + new Date().getTime(), function (token) {
        initializeTable(token);
    });
}

initializeTable(token){
// Here initialize ur data table with the passed token.
}
这对我很有用：

dataTable.context[0].ajax.data.yourCustomValue = value;
因为我的变量名是bwsValue：

var dataTable = $('#users-grid').DataTable( {
    "dom": 'lrtip',
    "order": [[ 0, "asc" ]],
    "processing": true,
    "serverSide": true,
    "ajax":{
        url :"users_list.php?active="+active,
        "data": {
            "bwsValue": 1
        },
        type: "post",
    }
});
我现在可以将数据设置为：

dataTable.context[0].ajax.data.bwsValue = 2;
这对我很有用：

dataTable.context[0].ajax.data.yourCustomValue = value;
因为我的变量名是bwsValue：

var dataTable = $('#users-grid').DataTable( {
    "dom": 'lrtip',
    "order": [[ 0, "asc" ]],
    "processing": true,
    "serverSide": true,
    "ajax":{
        url :"users_list.php?active="+active,
        "data": {
            "bwsValue": 1
        },
        type: "post",
    }
});
我现在可以将数据设置为：

dataTable.context[0].ajax.data.bwsValue = 2;
为什么不异步呢？他总是可以链接调用。当然他可以，但如果他不想重写整个ting async:false将起作用。是的，它会起作用，但异步不是更好的设计，因为它不会阻止用户线程。这是一个绝对可怕的“解决方案”。它解决了初学者对异步执行流缺乏理解的问题（无意冒犯，我们都有过！），使代码更加黑客化。呵呵……哇……反馈不错。放松点，我对异步执行非常了解。我显然误解了这个问题。但是现在我已经学到了我的经验…为什么不异步呢？他总是可以链接调用。当然他可以，但如果他不想重写整个ting async:false将起作用。是的，它会起作用，但异步不是更好的设计，因为它不会阻止用户线程。这是一个绝对可怕的“解决方案”。它解决了初学者对异步执行流缺乏理解的问题（无意冒犯，我们都有过！），使代码更加黑客化。呵呵……哇……反馈不错。放松点，我对异步执行非常了解。我显然误解了这个问题。但现在我已经吸取了教训，这是一个正确的答案。更优雅的是，这可以在
（function（）{…}）
结构中完成，即自执行函数，该函数在服务器响应时立即触发数据表初始化。@SubirKumarSao感谢您的回答。但我认为您的实现只获得一次令牌，并且将对datatable中的所有事件使用相同的令牌（转到其他页面、搜索等）。事实上，每次使用datatable上的ajax请求获取数据时，我都希望使用不同的令牌，因为服务器端有令牌验证，即检查令牌是否过期。因此，在执行ajax请求获取数据之前，我需要首先获取新的令牌。你知道吗？这是一个正确的答案。更优雅的是，这可以在
（function（）{…}）
结构中完成，即自执行函数，该函数在服务器响应时立即触发数据表初始化。@SubirKumarSao感谢您的回答。但我认为您的实现只获得一次令牌，并且将对datatable中的所有事件使用相同的令牌（转到其他页面、搜索等）。事实上，每次使用datatable上的ajax请求获取数据时，我都希望使用不同的令牌，因为服务器端有令牌验证，即检查令牌是否过期。因此，在执行ajax请求获取数据之前，我需要首先获取新的令牌。你知道这件事吗？