Ajax技

Ajax的特点

1. 异步提交：Ajax采用异步通信方式，能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据，提升了用户体验。
2. 无需插件：Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的，无需安装插件或控件。
3. 局部刷新：Ajax能够实现局部刷新，只更新需要更新的部分，而不是整个页面。
4. 支持多种格式数据交互：Ajax不仅支持XML格式数据交互，还支持JSON、HTML、文本等多种格式的数据交互。
5. 提高性能：因为Ajax可以在页面保留数据，只更新需要更新的部分，减少了不必要的请求和响应，从而提高了网站性能。
6. 提供多种编程语言支持：Ajax不仅支持Javascript编程，还支持其他编程语言，如PHP、ASP、Python等。
7. 可以实现动态效果：Ajax可以用来实现动态效果，如自动补全、搜索框提示、无限滚动等。

Ajax案列

 views

from django.shortcuts import render, HttpResponse


def a_ajax(request):
    if request.method == 'POST':
        """接受ajax提交的数据"""
        print(request.POST)  # 
        # d1 = request.POST.get('inp1')
        # d2 = request.POST.get('inp2')
        # d3 = int(d1)+int(d2)
        # print(d3)
        l_dict = {'username': 'kk', 'password': 123}
        import json
        return HttpResponse(json.dumps(l_dict))
    return render(request, 'a_ajax.html')

HTML文件

    
    
    
    
{#    #}


+
=

提交

前后端传输数据的编码格式

        我们只研究post请求方式，get没有请求方式，他的格式为

get：index（地址）？a=1&b=2

参数直接在url后面

post的请求方式

form表单

Ajax

api工具

1. form表单的post请求

默认的编码格式：urlencode

数据的传输方式：title=dasdas&price=2312&date=&publish=2&authors=3，k,v形式的键值对传输

后端如何接收：把前端提交的数据封装到request.POST中，而传输的文件则在request.FILES中

提交form-data文件数据：enctype：form-data

传输方式：title=dasdas&price=2312&date=&publish=2&authors=3

2. Ajax提交POST请求

默认Ajax提交数据 还是在request,POST中接受，默认编码格式urlencode

需要修改的contype：json

3. Ajax提交json的格式数据

json格式的数据提交后

设置提交json格式：

                $.ajax({
                url: '',//不写默认朝当前地址传递
                type: 'post',//默认为get
                data: JSON.stringify({inp1:inp1, inp2:inp2}),
                contentType: 'application/json',
                //回调函数用来压接受后端返回的数据
                success: function (res) {
                    console.log(res)

4. Ajax提交文件数据