json和ajax技术
Posted 又见芳踪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了json和ajax技术相关的知识，希望对你有一定的参考价值。
什么是json
json指的是javascript对象表示法
json是轻量级的文本数据交换格式
json 独立于语言
json具有自我描述性,,更易理解
json使用jsvaScript语法描述数据对象,但是jsjon仍然独立于语言和平台,json解析器和json库支持许多不同的编程语言
使用js的时候:转化为json : JSON.stringify()
转回字符串:JSON.parse()
使用python 的:
转化为json : json.dumps
转回字符串:josn.loads
合格的json对象:
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]
json为替代XML 的格式
ajax:(Asynchronous Javascript And XML)异步的javascript和XML
是一种异步与服务器交互的一种技术
优势:
1,异步:发一个请求不用等待响应,可以继续发下一个请求
2,偷偷的发请求,用户感受不到,不用刷新
3,数据量小,只需要想要的内容,不需要整个页面
缺点:
滥用技术,造成服务器压力
参数:
$.ajax({
url:‘/calc/‘ 请求的网址
type:‘post‘, 请求的方式
data:{
‘i1‘:i1,
‘i2‘:i2
},
success.function(res){ 成功之后做什么
console.log(res); res 拿到的响应
$(‘#i3‘).val(res)
}
})
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
<body>
<h1>计算</h1>
<input type="text" id="i1">
<input type="text" id="i2">
<input type="text" id="i3">
<button type="submit" id="d1">提交</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(‘#d1‘).click(function () {
var i1 = $(‘#i1‘).val(); 注意加上val取值
var i2 = $(‘#i2‘).val();
$.ajax({
url:‘/sale/‘,
type:‘post‘,
data:{
‘i1‘:i1,
‘i2‘:i2,
},
success:function (res) {
$(‘#i3‘).val(res) 得到值
}
})
})
</script>
在函数中return要使用HttpResponse对象
ajax设置csrf_token
1,通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。
"csrfmiddlewaretoken": $("[name = ‘csrfmiddlewaretoken‘]").val()使用jq获取
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "Q1mi",
"password": 123456,
"csrfmiddlewaretoken": $("[name = ‘csrfmiddlewaretoken‘]").val() // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
},
success: function (data) {
console.log(data);
}
})
2,放置到请求头中:
headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)},
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)}, // 从Cookie取csrftoken，并设置到请求头中
data: {"username": "Q1mi", "password": 123456},
success: function (data) {
console.log(data);
}
})
3,给全局添加:
建立一个js文件:
加入:
1,自己写的GetCookie方法:
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;
}
var csrftoken = getCookie(‘csrftoken‘);
2,使用$ajaxSteup()方法为ajax请求同一的设置
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。
如果你的视图渲染的html文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。
这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。
django.views.decorators.csrf import ensure_csrf_cookie
@ensure_csrf_cookie
def login(request):
pass
@ensure_csrf_cookie
def login(request):
pass
以上是关于json和ajax技术的主要内容，如果未能解决你的问题，请参考以下文章