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]])
            },

posted @ 2019-08-04 18:22 择一事，终一生阅读(174) 评论(0) 收藏举报

刷新页面返回顶部

择一事，终一生