在Jtable中删除操作时将csrf标记设置为post参数(Jquery)

时间:2015-10-31 20:28:52

标签: javascript jquery csrf jquery-jtable csrf-protection

您好我正在尝试在帖子中添加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();
            }
        });
    });
}

但是当我检查删除动作网址时,整个方法都反映了

2 个答案:

答案 0 :(得分:1)

将元元素添加到您从

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

答案 1 :(得分:1)

如果有人还在疑惑,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();
            }
        });
    });
}

这解决了在jTable AJAX删除调用中传递csrf或任何其他数据的问题。至于其他情况。在你包含jTable js foxes初始加载之后把它放好:

$.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>