web前端-ajax - 爱码网

一： Json

2.1 何谓Json

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。

JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。

#在线json格式解析
Bejson
http://www.bejson.com/

2.2 Json和Python数据对比

Python	Json
dict	object
list,tuple	array
str	string
int,fload	number
True	true
Flase	false
None	null

2.3 合格的JSON应该具备哪些条件

属性必须使用双引号括起来
不能使用undefined或者函数或者日期对象
只要是合规的JSON都可以用相应语言进行反序列操作

2.4 在JS中序列化和反序列化

2.4.1 序列化方法 JSON.stringify()

<script>
    var num1 = 1;
    var string_demo = \'wangys\';
    var array_demo = [1,\'wangys\',5];
    var object_demo = {\'name\':\'wangys\',\'age\':18};
    var bool_demo = true;
    var null_demo = null;
    //  js 的 序列化
    console.log(JSON.stringify(num1));
    console.log(JSON.stringify(string_demo));
    console.log(JSON.stringify(array_demo));
    console.log(JSON.stringify(object_demo));
    console.log(JSON.stringify(bool_demo));
    console.log(JSON.stringify(null_demo));
</script>

结果如下

2.4.2 反序列方法 JSON.parse()

<script>
    var num_json = 1;
    var string__json_demo = \'"wangys"\';
    var array_json_demo = \'[1,"wangys",5]\';
    var object_json_demo = \'{"name":"wangys","age":18}\';
    var bool_json_demo = true;
    var null_json_demo = null;
    //  js 的 反序列化
    console.log(JSON.parse(num_json));
    console.log(JSON.parse(string__json_demo));
    console.log(JSON.parse(array_json_demo));
    console.log(JSON.parse(object_json_demo));
    console.log(JSON.parse(bool_json_demo));
    console.log(JSON.parse(null_json_demo));
    console.log(JSON.parse(object_json_demo).name)
</script>

结果如下

二： ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

具有如下特性

异步
局部刷新

语法

<script>
    //  绑定事件
    $(\'#loginBtn\').click(function () {
        $.ajax({
            // 往服务器传参
            url: \'/login/\', // 发送数据的url
            type: \'post\', // 发送数据采用的方式
            data: {  // 字典格式的数据 
            },
            success:function (response) { //
                // 反序列化服务端返回的数据
                var response_obj = JSON.parse(response);
                console.log(response_obj);
                //条件
                if(){
                    //  条件成立后该做什么
                }else{
                    // 条件不成立又该做什么
                }
            }
        })
    })
</script>

我们通过一个登陆例子解释

# 前端页面

<body>
{% csrf_token %}
用户名：<input id="user" type="text"><br>
密码： <input id="pwd" type="password"><br>
<input type="button" id="loginBtn" value="登陆"><span id="login_error"></span>


<script>
    //  绑定事件
    $(\'#loginBtn\').click(function () {
        $.ajax({
            // 往服务器传参
            url: \'/login/\',
            type: \'post\',
            data: {
                user: $(\'#user\').val(),
                pwd: $(\'#pwd\').val(),
                csrfmiddlewaretoken: $("[name = \'csrfmiddlewaretoken\']").val()
            },
            success:function (response) {
                // 反序列化服务端返回的数据
                var response_obj = JSON.parse(response);
                console.log(response_obj);
                if(response_obj.user){
                    //  登陆成功
                    location.href=\'http://www.baidu.com\';
                }else{
                    // 登陆失败
                    $(\'#login_error\').html(response_obj.message)
                }
            }
        })
    })
</script>
</body>

# 后端处理

def login(request):
    response = {\'user\': None,\'message\':None}
    if request.method == \'POST\':
        user = request.POST.get(\'user\')
        pwd = request.POST.get(\'pwd\')
        db_search_ret = Userinfo.objects.filter(name=user,password=pwd).first()
        if db_search_ret:
            response[\'user\'] = user
        else:
            response[\'message\'] = \'用户名或者密码错误\'
        return  HttpResponse(json.dumps(response))
    else:
        return render(request,\'login.html\')

范例1：

<body>
{% csrf_token %}
<input type="text" id="id1">+
<input type="text" id="id2">=
<input type="text" id="id3">
<input type="button" value="提交" id="id4">

<script src="/static/jquery-3.3.1.js" ></script>
<script>
    $(\'#id4\').on(\'click\',function () {
        var i1 = $(\'#id1\').val();
        var i2 = $(\'#id2\').val();
        var csrfToken = $("[name=\'csrfmiddlewaretoken\']").val();
        $.ajax({
            url: \'/cs/userinfo/\',
            type: \'POST\',
            data: {
                \'i1\': i1,\'i2\': i2,\'csrfmiddlewaretoken\': csrfToken
            },
            success: function (response) {
                $(\'#id3\').val(response);
            }
        })
    })

</script>
</body>

范例2：获取csrfToken的第二种方法

# 单独放一个文件，在ajax之前导入即可
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\');

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);
    }
  }
});

　范例2：发送的数据不能有二次结构，如列表，需要使用JSON.stringify格式化。

        $.ajax({
            url: \'/fm/test/\',
            type: \'Post\',
            data: {
                \'name\': \'小黑\',\'sb\': JSON.stringify([[1,32,3],[4,5,6]])
            },