如何将csrf_token传递给jqgrid的editurl的post params？ [英] How to pass csrf_token to the post params of editurl of jqgrid?
本文介绍了如何将csrf_token传递给jqgrid的editurl的post params？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
jQuery（＃list）jqGrid（{
url：'{％url views。
数据类型：'json'，
mtype：'GET'，
colNames：['DID'，'UDID'，'Owner'，'Name' 'first''，'last seen']，
colModel：[
{name：'did'，index：'did'，width：30，searchoptions：{sopt：['eq' ne'，'bw'，'cn']}}，
{name：'udid'，index：'udid'，width：120，editable：true，searchoptions：{sopt：['eq' ne'，'bw'，'cn']}}，
{name：'d_owner'，index：'d_owner'，width：70，editable：true，searchoptions：{sopt：['eq' ne'，'bw'，'cn']}}，
{name：'d_name'，index：'d_name'，可编辑：true，searchoptions：{sopt：['eq'，'ne' bw'，'cn']}}，
{name：'d_firstseen'，index：'d_firstseen'，width：80}，
{name：'d_lastseen'，index：'d_l astseen'，width：80}]，
pager：jQuery（'＃pager'），
rowNum：20，
rowList：[20,50,100]，
sortname：
sortorder：desc，
multiselect：true，
viewrecords：true，
imgpath：'themes / basic / images'，
caption：'设备列表'
height：330，
width：1000，
onSelectRow：function（id）{
var id = $（＃list）getRowData（id） .message_id;
message_id = id;
}，
editurl：{％url views.manage.deviceseditajax％}
}）;
当我在JqGrid中编辑行时，我从editurl中获取错误：
禁止（403）
CSRF验证失败。请求已中止。
这是因为csrf_token不会传递给其他数据的editurl。
如何将csrf_token添加到POST请求到editurl？
此代码工作正常（完整的jqgrid init）：
jQuery（＃list）。jqGrid（{
url：'{％url views.manage.devicesajax％}'，
数据类型：'json'，
mtype：'GET'，
colNames：['DID'，'UDID'，'Owner'，'Name'，'First seen'，'Last seen']，
colModel：[
{name：'did'，index：'did'，width：30，searchoptions：{sopt：['eq'，'ne'，'bw'，'cn'] }}，
{name：'udid'，index：'udid'，width：120，editable：true，searchoptions：{sopt：['eq'，'ne'，'bw'，'cn' }}，
{name：'d_owner'，index：'d_owner'，width：70，editable：true，searchoptions：{sopt：['eq'，'ne'，'bw'，'cn' }}，
{name：'d_name'，index：'d_name'，editable：true，searchoptions：{sopt：['eq'，'ne'，'bw'，'cn']}}，
{name：'d_firstseen'，index：'d_firstseen'，width：80}，
{name：'d_lastseen'，index：'d_lastseen'，width：80}]，
pager：jQuery ＃b $ b rowNum：20，
rowList：[20,50,100]，
sortname：'did'，
sortorder：desc，
multiselect ：true，
viewrecords：true，
imgpath：'themes / basic / images'，
caption：'Devices list'，
height：330，
width： 1000，
editurl：{％url views.manage.deviceseditajax％}，
}）;
jQuery（＃list）。navGrid（'＃pager'，{edit：true，add：true，del：true，search：true}，
{
closeAfterEdit：true，
reloadAfterSubmit：true，
closeOnEscape：true，
editData：{csrfmiddlewaretoken：'{{csrf_token}}}}
}，
{
closeAfterAdd：true，
reloadAfterSubmit：true，
closeOnEscape：true，
editData：{csrfmiddlewaretoken：'{{csrf_token}}}}
}，
{
closeOnEscape：true，
delData：{csrfmiddlewaretoken：'{{csrf_token}}}}
}，
{
caption：搜索，
找到：Find，
重置：重置，
sopt：['eq'，'cn']，
matchText：match，
rulesText：rules ，
closeAfterSearch：true，
afterShowSearch：function（）
{
$（＃reset_filter1_block）显示（）。
}
}
）;
解决方案
我不使用Django框架，不熟悉 csrf_token ，但在Google搜索后，您似乎需要将其设置为请求的HTTP标头： xhr.setRequestHeader（'X- CSRF-Token'，csrf_token）; 。要在jqGrid的情况下执行此操作，您可以使用 loadBeforeSend 事件处理程序：
loadBeforeSend：function（jqXHR）{
//你应该修改下一行来获取CSRF以任何方式tocken
//（例如$（'meta [name = csrf]'）。attr（'content'）
//如果你有< meta name =csrf =abcdefjklmnopqrstuvwxyz =/>）
var csrf_token ='<％= token_value％>'; //任何方式获取
jqXHR.setRequestHeader（'X-CSRF-Token'，csrf_token）;
}
请参阅 here 非常接近的问题。
UPDATED ：要发布表单编辑用法的其他数据，您可以使用 editData ：editData：{csrfmiddlewaretoken：'< ％= token_value％>'}。例如：
jQuery（＃list）jqGrid（'navGrid'，'＃pager'，{}，
{//编辑选项（editGridRow方法的参数）
recreateForm：true，
reloadAfterSubmit：false，
closeOnEscape：true，
savekey：[true，13]
closeAfterEdit：true，
ajaxEditOptions：{
beforeSend：function（jqXHR）{
//您应该修改下一行以获取CSRF tocken
// in任何方式（例如$（'meta [name = csrf]'）。attr（'content'）
//如果你有< meta name =csrfcontent =abcdefjklmnopqrstuvwxyz =/>）
var csrf_token ='<％= token_value％>'; //任何方式获取
jqXHR.setRequestHeader（'X-CSRF-Token'，csrf_token）;
}
}，
editData：{
csrfmiddlewaretoken：'<％= token_value％>'
}
}，
{//添加选项（editGridRow方法的参数）
recreateForm：true，
reloadAfterSubmit：false，
closeOnEscape：true，
savekey：[true，13]，
closeAfterAdd：true，
ajaxEditOptions：{
beforeSend：function（jqXHR）{
//您应该修改下一行以任何方式获取CSRF tocken
//例如$（'meta [name = csrf]'）。attr（'content'）
//如果你有< meta name =csrfcontent =abcdefjklmnopqrstuvwxyz =/>）
var csrf_token ='<％= token_value％>'; //任何方式获取
jqXHR.setRequestHeader（'X-CSRF-Token'，csrf_token）;
}
}，
editData：{
csrfmiddlewaretoken：'<％= token_value％>'
}
}
）;
我在这里放置了两种方式：设置X-CSRF-TokenHTTP头和发布 csrfmiddlewaretoken 参数。您可以在相应的实验之后删除一个方法。
如果您对页面上的所有网格使用一些参数，您可以更好地更改默认值（请参阅 here 了解详情）
jQuery.extend（jQuery.jgrid.edit，{
recreateForm：true，
reloadAfterSubmit：false，
closeOnEscape ：true，
savekey：[true，13]，
closeAfterAdd：true，
closeAfterEdit：true，
ajaxEditOptions：{
beforeSend：function（jqXHR）{
//您应该修改下一行以任何方式获取CSRF tocken
//（例如$（'meta [name = csrf]'）。attr（'content'）
//如果您有< meta name =csrfcontent =abcdefjklmnopqrstuvwxyz =/>）
var csrf_token ='<％= token_value％>'; //任何方式获取
jq XHR.setRequestHeader（'X-CSRF-Token'，csrf_token）;
}
}，
editData：{
csrfmiddlewaretoken：'<％= token_value％>'
}
}）;
此设置对于添加和编辑表单都是常见的。所以你可以使用简化形式的 navGrid 。
jQuery（ #list）的jqGrid（ 'navGrid'， '＃寻呼机'）;
I'm using JqGrid with Django framework. That's JS:
jQuery("#list").jqGrid({
url:'{% url views.manage.devicesajax %}',
datatype: 'json',
mtype: 'GET',
colNames:['DID', 'UDID', 'Owner', 'Name', 'First seen', 'Last seen'],
colModel :[
{name:'did', index:'did', width: 30, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'udid', index:'udid', width: 120, editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_owner', index:'d_owner', width: 70, editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_name', index:'d_name', editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_firstseen', index:'d_firstseen', width: 80},
{name:'d_lastseen', index:'d_lastseen', width: 80}],
pager: jQuery('#pager'),
rowNum:20,
rowList:[20,50,100],
sortname: 'did',
sortorder: "desc",
multiselect: true,
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'Devices list',
height: 330,
width: 1000,
onSelectRow: function(id) {
var id = $("#list").getRowData(id).message_id;
message_id = id;
},
editurl: "{% url views.manage.deviceseditajax %}"
});
When I do edit row in JqGrid I get error from editurl:
Forbidden (403) CSRF verification failed. Request aborted.
It's because csrf_token doesn't pass to editurl with the other data. How to add csrf_token to the POST request to editurl ?
This code works perfectly ( complete piece of jqgrid init ):
jQuery("#list").jqGrid({
url:'{% url views.manage.devicesajax %}',
datatype: 'json',
mtype: 'GET',
colNames:['DID', 'UDID', 'Owner', 'Name', 'First seen', 'Last seen'],
colModel :[
{name:'did', index:'did', width: 30, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'udid', index:'udid', width: 120, editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_owner', index:'d_owner', width: 70, editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_name', index:'d_name', editable: true, searchoptions:{sopt:['eq','ne','bw','cn']}},
{name:'d_firstseen', index:'d_firstseen', width: 80},
{name:'d_lastseen', index:'d_lastseen', width: 80}],
pager: jQuery('#pager'),
rowNum:20,
rowList:[20,50,100],
sortname: 'did',
sortorder: "desc",
multiselect: true,
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'Devices list',
height: 330,
width: 1000,
editurl: "{% url views.manage.deviceseditajax %}",
});
jQuery("#list").navGrid('#pager',{edit:true,add:true,del:true,search:true},
{
closeAfterEdit:true,
reloadAfterSubmit:true,
closeOnEscape:true,
editData: {csrfmiddlewaretoken: '{{ csrf_token }}'}
},
{
closeAfterAdd:true,
reloadAfterSubmit:true,
closeOnEscape:true,
editData: {csrfmiddlewaretoken: '{{ csrf_token }}'}
},
{
closeOnEscape:true,
delData: {csrfmiddlewaretoken: '{{ csrf_token }}'}
},
{
caption: "Search",
Find: "Find",
Reset: "Reset",
sopt : ['eq', 'cn'],
matchText: " match",
rulesText: " rules",
closeAfterSearch: true,
afterShowSearch: function ()
{
$('#reset_filter1_block').show();
}
}
);
解决方案
I don't use Django framework and not familiar with the csrf_token, but after searching in Google it seems that you need to set it in the HTTP header of the request: xhr.setRequestHeader('X-CSRF-Token', csrf_token);. To do this in case of jqGrid you can use loadBeforeSend event handler:
loadBeforeSend: function(jqXHR) {
// you should modify the next line to get the CSRF tocken
// in any way (for example $('meta[name=csrf]').attr('content')
// if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
var csrf_token = '<%= token_value %>'; // any way to get
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
See here for a very close problem.
UPDATED: To post additional data in case of form editing usage you can use editData: editData: { csrfmiddlewaretoken:'<%= token_value %>' }. For example:
jQuery("#list").jqGrid('navGrid','#pager',{},
{ // Edit option (parameters of editGridRow method)
recreateForm:true,
reloadAfterSubmit:false,
closeOnEscape:true,
savekey: [true,13],
closeAfterEdit:true,
ajaxEditOptions: {
beforeSend: function(jqXHR) {
// you should modify the next line to get the CSRF tocken
// in any way (for example $('meta[name=csrf]').attr('content')
// if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
var csrf_token = '<%= token_value %>'; // any way to get
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
editData: {
csrfmiddlewaretoken: '<%= token_value %>'
}
},
{ // Add options (parameters of editGridRow method)
recreateForm:true,
reloadAfterSubmit:false,
closeOnEscape:true,
savekey: [true,13],
closeAfterAdd:true,
ajaxEditOptions: {
beforeSend: function(jqXHR) {
// you should modify the next line to get the CSRF tocken
// in any way (for example $('meta[name=csrf]').attr('content')
// if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
var csrf_token = '<%= token_value %>'; // any way to get
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
editData: {
csrfmiddlewaretoken: '<%= token_value %>'
}
}
);
I placed here both ways: setting of 'X-CSRF-Token' HTTP header and posting of the csrfmiddlewaretoken parameter. You can remove one way after the corresponding experiments.
If you use some parameters for all grids on the page you can better change the defaults (see here for details)
jQuery.extend(jQuery.jgrid.edit, {
recreateForm:true,
reloadAfterSubmit:false,
closeOnEscape:true,
savekey: [true,13],
closeAfterAdd:true,
closeAfterEdit:true,
ajaxEditOptions: {
beforeSend: function(jqXHR) {
// you should modify the next line to get the CSRF tocken
// in any way (for example $('meta[name=csrf]').attr('content')
// if you have <meta name="csrf" content="abcdefjklmnopqrstuvwxyz="/>)
var csrf_token = '<%= token_value %>'; // any way to get
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
editData: {
csrfmiddlewaretoken: '<%= token_value %>'
}
});
The setting is common for both Add and Edit forms. So you can use navGrid in the simplified form.
jQuery("#list").jqGrid('navGrid','#pager');
这篇关于如何将csrf_token传递给jqgrid的editurl的post params？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
