我们 在母板上写入这段代码：
// 个人定义大函数，不是重点，可以忽略
$(document).ready(function(){
get_sys_load();
var active_node = $("#mainnav-menu a[href='{{ request.path }}']");
active_node.parent().addClass("active-link");
if (active_node.parent().parent().hasClass("collapse")){
active_node.parent().parent().addClass("in");
}
});//end doc ready
// 个人定义大函数，不是重点，可以忽略
function get_sys_load(){
$.ajax({
url: "{% url 'get_server_host_status' %}",
type: "GET",
dataType: "json",
success: function(callback){
for( i in callback){
console.log(i,callback[i]);
$('#'+ i +'_display').text(callback[i]);
$('#'+ i +'_width').text(callback[i]);
$('#'+ i +'_attr').css('width',callback[i]+'%')
}// end for
},// end sucess func
error: function(callback){
alert(callback)
}// end error func
})
}
// 这个才是重点的代码，必须写
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
// 这个才是重点的代码，必须写
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
csrftoken = getCookie('csrftoken');
$.ajaxSetup({ //添加头部信息，csrftoken, 把token塞入头部
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
{% block bottom-js %}
{% endblock %}
我们在子板上调用这端js代码，调用的前提是子板的html页面必须嵌套了这个 csrf_token, 代码如下
html页面的代码：
==================
{% csrf_token %}
==================
======JQuery代码 =======
{% block bottom-js %}
function run_cmd(){ //由于 ajaxSetup 设置好了token，所以我们可以直接提交数据了！
var input_cmd = $('textarea').val();
$.ajax({
url:"{% url 'put_cmd' %}",
type:'POST',
dataType:'json',
data:{'host_id':$('#host_id').text(),'minion_name':$('#minion_id').text(),'cmd':input_cmd},
success: function(callback){
console.log(callback)
}, // end success
error: function (callback) {
console.log(callback);
$('code').append(callback)
}
})
}
function show_result(content){
}
{% endblock %}