javascript - 如何从 jqgrid 发送 CSRF 令牌
问题描述
我正在使用 PHP 7、Cake、JQuery 和 JQGrid 4.4.0 创建/编辑表格。
该表使用正确的数据正确显示。
表的正确行为是这样的:
- 表格与数据一起显示
- 我通过单击选择表中的一个数据行
- 我按下一个按钮以显示带有所选行信息的模式
- 我修改模态中的任何数据
- 我按下保存按钮
- 数据保存正确
但是,当我按下保存按钮时,我收到一个无效或不存在的 CSRF 令牌的错误。
最初该表是这样定义的:
$("#tabla_tx").jqGrid({
autowidth: true,
colNames:['idProyecto','IdMovil','Nombre Movil', 'Comuna', 'Region','ZONA','Area','Proyecto','Año Proyecto',
'Estado Plan', 'Sub-Estado Plan','BW Plan','Estado (Movil)','OTT','Estado OTT','BW OTT','PEP OTT',
'Imputación OTT','Fecha Est30','Año Est30','Mes Est30', 'Week Est30','Tipo de Acceso',
'Nombre Resp. Control','Prioridad', 'Fecha Entrega Parcial','Año Entrega Parcial',
'Mes Entrega Parcial','Week Entrega Parcial','WPlan','WFET','BW Entrega','Fecha Entrega','Ano Entrega',
'Mes Entrega','Week Entrega', 'Responsable (UC)','Condicion Actual (Problema)','Problema (Nombre Resp.)',
'Responsable Actual (Unidad Responsable)','Gerencia Resp','Nuevo Responsable',
'Descripcion Condicion Actual','FET Hito','Comentario','Supervisor UM',
'Contratista','OPR1','Salto1','TICKET1','OPR2','Salto2','TICKET2','Ticket Instalacion 1',
'Ticket Instalacion 2','Ticket Retiro 1','Ticket Retiro 2','Ticket Router','BW Actual',
'Observacion 1','Observacion 2','Actividad a Ejecutar','Nuevo PE','Cambio de PE','PE.Actual','PE.Final',
'Shelf','Slot','Tipo de tarjeta','SIUs','RFI Formalizado','RFI Estado','Ticket Tx',
'Plan','Tecnologia','Activ.Infraestructura','Numero TP','Estado TP','Fecha TP','PM',
'FET','% Avance Semana Actual', 'Ingenieria (20%)', 'Permisos (20%)', 'Instalacion Acceso (20%)',
'Equipos TX (20%)', 'Pruebas y PEM (20%)'],
colModel :[{
name:'dato0',
index:'dato0' ,
align: 'left',
hidden:true,
editable: true,
editoptions:{visible: false}},
{name:'dato1', index:'dato1' , align: 'left', hidden:false, editable: true, editoptions:{disabled: false,
style: "width: 250px"}},
{name:'dato2', index:'dato2' , align: 'left', hidden:false, width: 250, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato3', index:'dato3' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_comunas}},
{name:'dato4', index:'dato4' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{disabled: true,style: "width: 250px",value:datos_region}},
{name:'dato5', index:'dato5' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{disabled: true,style: "width: 250px",value:datos_zonas}},
{name:'dato86', index:'dato86' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato6', index:'dato6' , align: 'left', hidden:false, width: 250, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_proyectos}},
{name:'dato7', index:'dato7' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_anos}},
{name:'dato8', index:'dato8' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_estadoplan}},
{name:'dato9', index:'dato9' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_subestadoplan}},
{name:'dato10', index:'dato10' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato11', index:'dato11' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_estadomovil}},
{name:'dato12', index:'dato12' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato13', index:'dato13' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_estadoott}},
{name:'dato14', index:'dato14' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato76', index:'dato76' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato77', index:'dato77' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato22', index:'dato22' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato23', index:'dato23' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato24', index:'dato24' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true, style: "width: 250px"}},
{name:'dato25', index:'dato25' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato21', index:'dato21' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_tipoacceso}},
{name:'dato28', index:'dato28' , align: 'left', hidden:false, width:250, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_responsablecontrol}},
{name:'dato67', index:'dato67' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_prioridad}},
{name:'dato29', index:'dato29' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato30', index:'dato30' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato31', index:'dato31' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato32', index:'dato32' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato68', index:'dato68' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato20', index:'dato20' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato15', index:'dato15' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato16', index:'dato16' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato17', index:'dato17' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato18', index:'dato18' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato19', index:'dato19' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true,style: "width: 250px"}},
{name:'dato33', index:'dato33' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato26', index:'dato26' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_problema}},
{name:'dato35', index:'dato35' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_nombreresponsable}},
{name:'dato27', index:'dato27' , align: 'left', hidden:false, width:250, editable: true, edittype:'select',
editoptions:{disabled: true,style: "width: 250px",value:datos_unidadresponsable}},
{name:'dato34', index:'dato34' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{disabled: true,style: "width: 250px",value:datos_gerenciaresponsable}},
{name:'dato52', index:'dato52' , align: 'left', hidden:false, width:250, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato53', index:'dato53' , align: 'left', hidden:false, width:300, editable: true,edittype:"textarea",
editoptions:{rows:"3",cols:"20",style: "width: 250px"}},
{name:'dato54', index:'dato54' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato55', index:'dato55' , align: 'left', hidden:false, width:300, editable: true,edittype:"textarea",
editoptions:{rows:"3",cols:"20",style: "width: 250px"}},
{name:'dato63', index:'dato63' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_supervisorum}},
{name:'dato64', index:'dato64' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_contratista}},
{name:'dato36', index:'dato36' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato37', index:'dato37' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato38', index:'dato38' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato39', index:'dato39' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato40', index:'dato40' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato41', index:'dato41' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato42', index:'dato42' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato43', index:'dato43' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato44', index:'dato44' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato45', index:'dato45' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato46', index:'dato46' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato47', index:'dato47' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px", value:datos_banda}},
{name:'dato48', index:'dato48' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato49', index:'dato49' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato50', index:'dato50' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato51', index:'dato51' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px", value:datos_pe}},
{name:'dato59', index:'dato59' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_cambiope}},
{name:'dato60', index:'dato60' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px", value:datos_pe}},
{name:'dato61', index:'dato61' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px", value:datos_pe}},
{name:'dato56', index:'dato56' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato58', index:'dato58' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_slot}},
{name:'dato57', index:'dato57' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_tipotarjeta}},
{name:'dato62', index:'dato62' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_sius}},
{name:'dato65', index:'dato65' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato69', index:'dato69' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_rftestado}},
{name:'dato66', index:'dato66' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato70', index:'dato70' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_plan}},
{name:'dato71', index:'dato71' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_tecnologia}},
{name:'dato72', index:'dato72' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_actividad_infraestructura}},
{name:'dato73', index:'dato73' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px"}},
{name:'dato74', index:'dato74' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_estado_tp}},
{name:'dato75', index:'dato75' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato78', index:'dato78' , align: 'left', hidden:false, editable: true,
editoptions:{disabled: true, style: "width: 250px"}},
{name:'dato79', index:'dato79' , align: 'left', hidden:false, editable: true,
editoptions:{style: "width: 250px",
dataInit: function(element) {$(element).datepicker({dateFormat: 'yy-mm-dd'})}}},
{name:'dato80', index:'dato80' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato81', index:'dato81' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato82', index:'dato82' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato83', index:'dato83' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato84', index:'dato84' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}},
{name:'dato85', index:'dato85' , align: 'left', hidden:false, editable: true, edittype:'select',
editoptions:{style: "width: 250px",value:datos_porcentajes}}
],
jsonReader: { repeatitems: false },
paging: true,
loadonce:false,
pager:jQuery('#pager_tx'),
datatype: "jsonstring",
datastr: data,
rowNum: 50,
rowList: [50,100,500,1000,5000],
viewrecords: true,
caption: 'Proyectos de Transmisión e Inbuilding - SubGerencia de Proyectos de Acceso',
editurl:$("#urlActualizar").val().replace("param", area),
height: '410'
});
jQuery("#tabla_tx").jqGrid('navGrid','#pager_tx',{del:false,add:false,edit:false,search:false});
jQuery("#tabla_tx").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
jQuery("#tabla_tx").jqGrid('navButtonAdd','#pager_tx',{caption:"Excel",
onClickButton:function(){
$(location).attr('href',$("#urlExcel").val());
}}
);
基于如何将 csrf_token 传递给 jqgrid 的 editurl 的帖子参数中解释的解决方案?并在单元格编辑上通过 jqgrid 传递 csrf 令牌,我将以下代码行添加到 jqGrid 的选项中,但无济于事:
loadBeforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
},
editData: {
csrfmiddlewaretoken: $('meta[name="csrfToken"]').attr('content')
},
postData: {
csrfmiddlewaretoken: $('meta[name="csrfToken"]').attr('content')
},
ajaxEditOptions:{
beforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
}
},
ajaxGridOptions:{
beforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
}
},
ajaxRowOptions:{
beforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
}
},
ajaxSelectOptions:{
beforeSend: function(jqxhr){
jqxhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrfToken"]').attr('content'));
}
}
我的问题是:
- 有什么我必须添加/更改以避免这个问题吗?
- 在提到的页面上,有人用以下代码行解决了同样的问题。这些适用于我的问题吗?
onSelectRow: function(id){
if(id && id!==lastSel){
$(selector).restoreRow(lastSel);
lastSel=id;
}
var editparameters = {
extraparam: {csrfmiddlewaretoken: $('.token-data').data('token')},
keys: true,
};
$(selector).jqGrid('editRow', id, editparameters);
}
- 根据http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events#list_of_events,如果不是 beforeSend,建立 CSRF 令牌的正确事件是什么?
提前致谢
解决方案
解决了
根据 Horst Walter 在How to set request header to the ajax object for jqGridajaxSetup
中的解决方案,您必须使用 JQuery 的函数在带有 jqgrid 表的页面中添加以下 Javascript 代码行:
var csrfHeader=""; //Your CSRF header here
$.ajaxSetup({
headers : {
'X-CSRF-Token' : csrfHeader
}
});
就我而言,我将标题放在<meta>
页面的标签中。对于像我这样在 cakephp 4 中使用 PHP 的人,可以<head>
在页面部分添加以下行来完成:
<?= $this->Html->meta('csrfToken', $this->request->getAttribute('csrfToken')) ?>
然后将<meta>
标签的值赋给 javascript 变量。对于那些使用 JQuery 的人,可以使用以下行:
var csrfHeader=$('meta[name="csrfToken"]').attr('content');
无论如何谢谢:-D
推荐阅读
- reactjs - 填充的对象似乎没有出现在邮递员的响应正文中
- tailwind-css - 可滚动表留下剩余边框
- python - 无法让 pywinauto 单击按钮
- java - 无法将值插入数据库 sqllite CodeOneName
- python - 如何从 SciKitLearn 凝聚聚类中解析数据
- npm - Bigbluebutton 开发 html5 客户端未启动
- xml - 在 XML 中使用 CDATA 作为参数
- mysql - AWS RDS 工作台连接问题
- vim - Vimscript - how can i check if a character is present in a variable
- reactjs - 当reducer在我的功能组件reactjs中出错时,我想清除或初始状态