ajax的使用

Posted sypx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax的使用相关的知识,希望对你有一定的参考价值。

发送请求的方式:

  1.form表单  post/get

  2.地址栏直接输入URL    get

  3.a标签       get

ajax

  1.与服务器进行交互,是js技术,发送请求,传输数据是XML(json)

  2.特点: 异步,局部刷新,数据量少

    异步交互:客户端发送一个请求,无需等待服务器的响应结束,就可以发送第二个请求

  3.使用:

    用Jquery发ajax

    先导入Jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    写js代码

$.ajax({
    url: ‘/ajax_test/‘,   #  提交的地址
    type: ‘post‘,		  # 提交的方式
    data: {				  #  数据
        name: ‘xiaobai‘,
        age: 73,
        hobby: JSON.stringify([‘吃‘, ‘cnb‘, ‘画大饼‘])
    },
    success: function (res) {    # 回调函数
        $(‘[name="ii3"]‘).val(res)
    },
    error: function (res) {
                console.log(res)
    }
})

    json: 一种数据类型

?     python

    ? 数据类型: 数字 字符串 布尔值 列表 字典 None

?     序列化:python的数据类型 ——》 json字符串

    ? json.dumps(python的数据类型)

?     json.dump(python的数据类型, f )

?     反序列化: json字符串 ——》 python的数据类型

    ? json.loads( json字符串 )

?     json.load( json字符串, f)

?     前端

?     数据类型: 数字 字符串 布尔值 数组 对象 null

    ? 序列化: JSON.stringify(数据类型) ——》 json字符串

?     反序列化: JSON.parse(json字符串) ——》前端的数据类型

  4.ajax上传文件

<script>

    $(‘#b1‘).click(function () {

        var form_obj = new FormData();   # 组建FormData对象
        form_obj.append(‘x1‘, $(‘#f1‘)[0].files[0]);

        $.ajax({
            url: ‘/upload/‘,
            type: ‘post‘,
            data: form_obj,
            processData:false,   #  不处理编码方式
            contentType:false,	 #  不处理 contentType请求头
            success: function (res) {
                alert(‘OK‘)
            }
        })

    })

</script>

  注意:processData:false时,编码方式是:enctype="multipart/form-data"    当processData:true时,编码方式是:enctype="application/x-www-form-urlencoded"

  view中:

def upload(request):
    if request.is_ajax(): # 判断是否是ajax请求
        # 拿到文件
        file_obj = request.FILES.get(‘x1‘)
        # 接收文件
        with open(file_obj.name,‘wb‘)as f:
            for i in file_obj.chunks():
                f.write(i)
        return HttpResponse(‘ok‘)
    return render(request,‘upload.html‘)

  5.ajax通过django的CSRF校验:

  前提条件:保证访问的页面有csrftoken的cookie

    (1)模板中使用csrf_token标签

    (2)给视图加装饰器

from django.views.decorators.csrf import ensure_csrf_cookie  # 确保访问某个视图有csrf_cookie

    方式一:

$.ajax({
    url: ‘/calc/‘,
    type: ‘post‘,
    data: {
        csrfmiddlewaretoken:$(‘[name="csrfmiddlewaretoken"]‘).val() ,
        i1: $(‘[name="i1"]‘).val(),
        i2: $(‘[name="i2"]‘).val(),
    },
    success: function (res) {
        $(‘[name="i3"]‘).val(res)
    }
})

    方式二:

$(‘#b2‘).click(function () {

    $.ajax({
        url: ‘/calc2/‘,
        type: ‘post‘,
        headers:{
           ‘X-csrftoken‘: $(‘[name="csrfmiddlewaretoken"]‘).val(),
        }, 
        data: {
            i1: $(‘[name="ii1"]‘).val(),
            i2: $(‘[name="ii2"]‘).val(),
        },
        success: function (res) {
            $(‘[name="ii3"]‘).val(res)
        }
    })
});

  

      

 

 

    

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

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

Spring MVC 3.2 Thymeleaf Ajax 片段

AJAX 响应:数据(JSON、XML)还是 HTML 片段? [关闭]

执行AJAX返回HTML片段中的JavaScript脚本