Ajax技_代码007(未授权)

本文介绍: 数据的传输方式：title=d asd as&a mp;price=2312&a mp;d ate=&a mp;publish=2&a mp;authors=3，k,v形式的键值对传输。后端如何接收：把前端提交的数据封装到request.POST中，而传输的文件则在request.FILES中。传输方式：title=d asd as&price=2312&date=&publish=2&authors=3。提交form–data 文件数据：enc type：form–data。默认的编码格式：urlencode。json 格式的数据提交后。

views

from django.shortcuts import render, HttpResponse


def a_ajax(request):
    if request.method == 'POST':
        """接受ajax提交的数据"""
        print(request.POST)  # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}&gt;
        # 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&gt;
<html lang="en"&gt;
<head&gt;
    <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的请求方式

1. form表单的post请求

默认的编码格式：urlencode

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

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

<script>
    $(".btn").click(function (ev) {
        console.log(123);
        // 要获取到文件数据，
        {#console.log($("#myfile")[0].files[0]) // C:fakepath123.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>