在Jtable(Jquery）中删除操作时，csrf令牌设置为post参数

csrf token set as post parameter while deleting action in Jtable (Jquery )

本文关键字：令牌 csrf 设置 参数 post 操作 Jtable Jquery 删除      更新时间：2023-09-26

嗨，我试图在帖子中添加csrf令牌，同时删除jtable中的记录，它不起作用，但listAction&updateAction运行良好。

我的代码片段：-

$(document).ready(function () {
    $('#main-content').jtable({
        title: ' Data',
        selecting: true, //Enable selecting
        multiselect: true, //Allow multiple selecting
        selectingCheckboxes: true, //Show checkboxes on first column
        paging: true, //Enable paging
        pageSize: 10, //Set page size (default: 10)           
        actions: {
            listAction:"${pageContext.request.contextPath}/mycontroller/all"  ,
           // createAction:"${pageContext.request.contextPath}/mycontroller/create",
            updateAction:"${pageContext.request.contextPath}/mycontroller/edit",
            deleteAction:"${pageContext.request.contextPath}/mycontroller/delete"
        },
        fields: {
            code: {
                title:'Code',
                width: '25%',
                 key: true,
                edit:true,
                input: function (data) {
                    if (data.value) {
                        return '<input type="text" readonly class="jtable-input-readonly" name="code" value="' + data.value + '"/>';
                    }
                },
              },
            name: {
                title: 'Name',
                width: '25%',
                create:true,
                edit:true
            },
            craetedTs: {
                title: 'Created',
                width: '25%',
                edit:false
            },

            modifiedTs: {
                title: 'mdate',
                width: '25%',
                edit:true,
                input: function (data) {
                     if (data.value) {
                         mdate='';
                         var date = new Date();
                         var options = {
                             year: "numeric", month: "2-digit",
                             day: "2-digit", hour: "2-digit", minute: "2-digit" ,second:"2-digit"
                         };
                        today=date.toLocaleTimeString("en-us", options);
                        today=today.replace(',', '');
                      return '<input type="text" readonly class="jtable-input-readonly" name="modifiedTs" value="' + today + '"/>';
                     }
                } 
            },
             _csrf: {
                  visibility: 'hidden',
                  edit:true,
                  input: function (data) {
                      return '<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />';
                   }
            }
        }
    });
     $('#main-content').jtable('load',{'${_csrf.parameterName}' : '${_csrf.token}'});
  //Delete selected 
    $('#DeactiveID').button().click(function () {
           var $selectedRows = $('#main-content').jtable('selectedRows');
           $('#main-content').jtable('deleteRows', $selectedRows);
       });
});

甚至我尝试删除下面的代码：-

deleteAction: function (postData) {
    return $.Deferred(function ($dfd) {
        $.ajax({
            url: '/Demo/DeleteStudent',
            type: 'POST',
            dataType: 'json',
            data: '${_csrf.parameterName}' + "=" +'${_csrf.token}' ,
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
}

但当我检查删除操作url时，整个方法都反映了

将元元素添加到从调用ajax方法的页面中

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

并对您的deleteAction 进行此更改

deleteAction: function (postData) {
    return $.Deferred(function ($dfd) {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            url: '/Demo/DeleteStudent',
            type: 'POST',
            dataType: 'json',
            beforeSend: function (request)
                {
                    request.setRequestHeader(header, token);
                },
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
}

如果有人还在想，Lalit让我朝着正确的方向前进，但我的最终解决方案是：

deleteAction: function (postData) {
    return $.Deferred(function ($dfd) {
        postData.csrf_token = csrf_token;
        $.ajax({
            url: 'prizes/delete',
            type: 'POST',
            dataType: 'json',
            data: postData,
            beforeSend: function (request)
            {
                request.setRequestHeader("csrf_token", csrf_token);
            },
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
}

这解决了在jTableAJAX删除调用中传递csrf或任何其他数据的问题。至于其他情况。在包含jTablejs之后，将其放在初始加载中：

$.extend(true, $.hik.jtable.prototype.options, {
    ajaxSettings: {
        data: {csrf_token: csrf_token},
    }
});

然后有一个隐藏的字段要添加到字段列表中：

csrf_token: {
  visibility: 'hidden',
  edit:true,
  input: function (data) {
      return "<input type='hidden' name='csrf_token' value='" + csrf_token + "'/>";
      }
}

这是我的代码作为一个完整的例子：

 <!-- Include jTable script file. -->
 <script src="{{site.uri.public}}/jtable/jquery.jtable.js" type="text/javascript"></script>
 <script type="text/javascript">
    var csrf_token = $('meta[name=csrf_token]').attr("content");
    $.extend(true, $.hik.jtable.prototype.options, {
        ajaxSettings: {
            data: {csrf_token: csrf_token},
        }
    });
 </script>
 <script type="text/javascript">
    $(document).ready(function () {
        var csrf_token = $('meta[name=csrf_token]').attr("content");
        $("#PrizesTableContainer").jtable({
            title: 'Prizes',
            actions: {
                listAction: 'prizes/get',
                createAction: 'prizes/create',
                updateAction: 'prizes/update',
                deleteAction: function (postData) {
                    return $.Deferred(function ($dfd) {
                        postData.csrf_token = csrf_token;
                        $.ajax({
                            url: 'prizes/delete',
                            type: 'POST',
                            dataType: 'json',
                            data: postData,
                            beforeSend: function (request)
                            {
                                request.setRequestHeader("csrf_token", csrf_token);
                            },
                            success: function (data) {
                                $dfd.resolve(data);
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                }
            },
            fields: {
                id: {
                    key: true,
                    list: false
                },
                machine_name: {
                    title: 'Machine name',
                    width: '10%'
                },
                reel1: {
                    title: 'Reel1',
                    width: '15%'
                },
                reel2: {
                    title: 'Reel2',
                    width: '15%'
                },
                reel3: {
                    title: 'Reel3',
                    width: '15%'
                },
                payout_credits: {
                    title: 'Payout credits',
                    width: '15%'
                },
                payout_winnings: {
                    title: 'Payout winnings',
                    width: '15%'
                },
                probability: {
                    title: 'Probability',
                    width: '15%'
                },
                csrf_token: {
                  visibility: 'hidden',
                  edit:true,
                  input: function (data) {
                      return "<input type='hidden' name='csrf_token' value='" + csrf_token + "'/>";
                      }
                }
            }
        });
        $("#PrizesTableContainer").jtable('load');
    });
</script>
相关文章：