Ajax技

news2024/9/29 9:30:40

Ajax的特点

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

Ajax案列

views

from django.shortcuts import render, HttpResponse


def a_ajax(request):
    if request.method == 'POST':
        """接受ajax提交的数据"""
        print(request.POST)  # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}>
        # 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文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
{#    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>#}
</head>
<body>
<input type="text" id="inp1">+
<input type="text" id="inp2">=
<input type="text" id="inp3">
<button class="btn">提交</button>
</body>
</html>

<script>
    $('.btn').click(
        function() {
            var inp1 = $("#inp1").val();
            var inp2 = $("#inp2").val();
            //获取到的数据返回到后端，使用python来计算

            $.ajax({
                url: '',//不写默认朝当前地址传递
                type: 'post',//默认为get
                data: {inp1: inp1, inp2: inp2},
                //回调函数用来压接受后端返回的数据
                success: function (res) {
                    console.log(res)
                    //获取值
                    {#$("#inp3").val(res)#}
                    //进行返序列化
                    //后端返回的数据别忘记返序列化，后端记得序列化
                    res = JSON.parse(res)
                    console.log(res.username)
                    console.log(res.password)


                }
            })
    })
</script>

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

我们只研究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提交文件数据

<script>
    $(".btn").click(function (ev) {
        console.log(123);
        // 要获取到文件数据，
        {#console.log($("#myfile")[0].files[0]) // C:\fakepath\123.png#}
        // 提交文件数据需要借助于formdata对象
        var myFormDataObj = new FormData;
        var username = $("#username").val();
        var myfile = $("#myfile")[0].files[0];
        myFormDataObj.append('username', username);
        myFormDataObj.append('myfile',myfile);

        $.ajax({
            url: '',
            type: 'post',
            {#data: JSON.stringify({a: 1, b: 2}), // 序列化的     "{"a":1, "b":2}"#}
            data: myFormDataObj, // 序列化的     "{"a":1, "b":2}"
            {#contentType: 'application/json', // json格式的#}
            contentType:false, // 告诉浏览器不要给我的编码格式做任何的处理
            processData: false, //
            success: function (res) {

            }
        })
    })
</script>

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==