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": "李四"} ] 
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







以上是关于json和ajax技术的主要内容,如果未能解决你的问题,请参考以下文章

json 与 ajax

ajax和json的优缺点

Ajax和JSON

什么是AJAX?

Springmvc下的jquery,ajax和json的等技术的运用

ajax传递json数组对象