标签：val request number django Ajax result 序列化 data user

Ajax和django自带序列化组件

1.Ajax

1.1 Ajax介绍

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。
- 即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：
  - 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：
  - 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

1.2 发送请求方式

向后端发送请求的方式
- 浏览器地址直接url回车
  - GET请求
- a标签的 href 属性
  - GET请求
- form表单
  - GET请求/POST请求
- Ajax
  - GET请求/POST请求

1.3 Ajax案例

页面上有两个 input 框
在第一个input框中输入数字，在第二个框中也输入数字
计算结果渲染到第三个框中

1.3.1 JS实现

<!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.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>number_one : <input type="text" id="number1"></div>
<div>number_two : <input type="text" id="number2"></div>
<div>result : <input type="text" id="result"></div>
<button id="btn_result">点我计算结果</button>
<script>
    $(document).ready(
        $("#btn_result").click(function () {
            let numberOne = $("#number1").val();
            let numberTwo = $("#number2").val();
            let result = parseInt(numberOne) + parseInt(numberTwo)
            $("#result").val(result)
        })
    )


</script>
</body>
</html>

1.3.2 Ajax基础实现

<!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.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>number_one : <input type="text" id="number1"></div>
<div>number_two : <input type="text" id="number2"></div>
<div>result : <input type="text" id="result"></div>
<button id="btn_result">点我计算结果</button>
<script>

    $(document).ready(
        $("#btn_result").click(function () {
            let numberOne = $("#number1").val();
            let numberTwo = $("#number2").val();
            // 基于Ajax发送请求
            $.ajax({
                // 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
                url: "",
                // type : 请求类型 GET / POST  ，默认是get
                type: "post",
                // data ： 自己携带数据 ，做成字典的格式传输数据
                data: {'number_one': numberOne, "number_two": numberTwo},
                // success : 回调函数 ， 负责接收到后端返回的数据
                success: function (data) {
                    console.log(data)
                    $("#result").val(data)
                }
            })
        })
    )


</script>
</body>
</html>

1.3.3 渲染json 数据

基于前端的js转换数据类型

def home(request):
    if request.method == "POST":
        data = request.POST
        number_one = data.get("number_one")
        number_two = data.get("number_two")
        result = int(number_one) + int(number_two)
        # return HttpResponse(result)
        return HttpResponse(json.dumps({"code": 300, "result": result}))
    return render(request, "home.html", locals())
<script>

    $(document).ready(
        $("#btn_result").click(function () {
            let numberOne = $("#number1").val();
            let numberTwo = $("#number2").val();
            // 基于Ajax发送请求
            $.ajax({
                // 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
                url: "",
                // type : 请求类型 GET / POST  ，默认是get
                type: "post",
                // data ： 自己携带数据 ，做成字典的格式传输数据
                data: {'number_one': numberOne, "number_two": numberTwo},
                // success : 回调函数 ， 负责接收到后端返回的数据
                success: function (data) {
                    console.log(data)
                    console.log(typeof (data))
                    // 使用 js自己的序列化方法序列化数据
                    let dataVal = JSON.parse(data)
                    console.log(typeof (dataVal))
                    if (dataVal.code === 200) {
                        $("#result").val(dataVal.result)
                    } else {
                        alert("非法的数据")
                    }
                }
            })
        })
    )


</script>

上述方法，后端传给前端的数据是 string 类型，需要在前端自己做一步类型强转
后端的 jsonresponse对象渲染json格式的数据
发现在前端接收到的数据类型就是 object 类型，不需要额外的转换

def home(request):
    if request.method == "POST":
        data = request.POST
        number_one = data.get("number_one")
        number_two = data.get("number_two")
        result = int(number_one) + int(number_two)
        return JsonResponse({"code": 300, "result": result})
    return render(request, "home.html", locals())
<script>

    $(document).ready(
        $("#btn_result").click(function () {
            let numberOne = $("#number1").val();
            let numberTwo = $("#number2").val();
            // 基于Ajax发送请求
            $.ajax({
                // 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
                url: "",
                // type : 请求类型 GET / POST  ，默认是get
                type: "post",
                // data ： 自己携带数据 ，做成字典的格式传输数据
                data: {'number_one': numberOne, "number_two": numberTwo},
                // success : 回调函数 ， 负责接收到后端返回的数据
                success: function (data) {
                    console.log(data)
                    console.log(typeof (data))
                    // 使用 js自己的序列化方法序列化数据
                    {#let dataVal = JSON.parse(data)#}
                    console.log(typeof (data))
                    if (data.code === 200) {
                        $("#result").val(data.result)
                    } else {
                        alert("非法的数据")
                    }
                }
            })
        })
    )
</script>

1.4 Ajax语法总结

<script>
    // 先给按钮绑定点击事件
    $('#btn').click(function () {
        // 向后端发送Ajax请求
        $.ajax({
            // （1）指定发送后端的请求接口
            url: '',// 不写就是朝当前地址发送请求
            
            // （2）请求方式
            type: "post", // 不指定默认就是 get 全小写
          
            // dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
            // dataType: "json",
          
            // （3）提交数据, 自己携带数据 ，做成字典的格式传输数据
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            
            // （4）异步提交有一个回调函数 （异步回调机制）
            // 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
            success: function (args) {
                {#alert(args)#}
                // 通过DOM操作动态数据渲染到第三个 input 框中
                console.log(args) // string
                $('#d3').val(args)
            },
        })
    })
</script>

1.5 前后端传输数据的编码格式(contentType)

无论是form表单还是Ajax，传输数据的默认编码格式都是urlencoded
- 只能传输键值对，无法传输文件数据
formdata ：可以传输文件数据 request.FILES
json : application/json

def home(request):
    if request.method == "POST":
        data =request.body
        print(data) # b'{"number_one":"32","number_two":"3"}'
        data = data.decode('utf8')
        print(data) # {"number_one":"32","number_two":"3"}
        print(type(data)) # <class 'str'>
        data = json.loads(data)
        print(type(data))
        number_one = data.get("number_one")
        number_two = data.get("number_two")
        result = int(number_one) + int(number_two)
        return JsonResponse({"code": 200, "result": result})
    return render(request, "home.html", locals())

<script>

    $(document).ready(
        $("#btn_result").click(function () {
            let numberOne = $("#number1").val();
            let numberTwo = $("#number2").val();
            // 基于Ajax发送请求
            $.ajax({
                // 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
                url: "",
                // type : 请求类型 GET / POST  ，默认是get
                type: "post",
                // data ： 自己携带数据 ，做成字典的格式传输数据
                data: JSON.stringify({'number_one': numberOne, "number_two": numberTwo}),
                {#data: {'number_one': numberOne, "number_two": numberTwo},#}
                // success : 回调函数 ， 负责接收到后端返回的数据
                success: function (data) {
                    console.log(data)
                    console.log(typeof (data))
                    // 使用 js自己的序列化方法序列化数据
                    {#let dataVal = JSON.parse(data)#}
                    console.log(typeof (data))
                    if (data.code === 200) {
                        $("#result").val(data.result)
                    } else {
                        alert("非法的数据")
                    }
                }
            })
        })
    )


</script>

1.6 Ajax传输文件数据

<script>

    $(document).ready(
        $("#btn_result").click(function () {
            let numberOne = $("#number1").val();
            let numberTwo = $("#number2").val();
            let fileVal = $("#file_input")[0].files[0];
            // Ajax携带文件数据需要借助第三方的 formData对象
            // （1）实例化得到一个 form对象
            // 将所有的键值对数据都要放到 form对象中
            let formDataObj = new FormData();
            formDataObj.append("numberOne", numberOne)
            formDataObj.append("numberTwo", numberTwo)
            formDataObj.append("file", fileVal)
            console.log(fileVal)
            console.log(formDataObj)
            // 基于Ajax发送请求
            $.ajax({
                // 参数 url : 指定当前数据提交的网址,如果不写 form表单的action是一样，默认释放前路由地址
                url: "",
                // type : 请求类型 GET / POST  ，默认是get
                type: "post",
                // data ： 自己携带数据 ，做成字典的格式传输数据
                // （2）传输的data直接放上面的 form对象即可
                data: formDataObj,
                // （3）走form对象不能让他使用编码对数据进行编码
                contentType: false, // 默认编码是 urlencoded
                // （4）告诉浏览器不要对数据进行额外的处理
                processData: false,
                {#data: {'number_one': numberOne, "number_two": numberTwo},#}
                // success : 回调函数 ， 负责接收到后端返回的数据
                success: function (data) {
                    console.log(data)
                    console.log(typeof (data))
                    // 使用 js自己的序列化方法序列化数据
                    {#let dataVal = JSON.parse(data)#}
                    console.log(typeof (data))
                    if (data.code === 200) {
                        $("#result").val(data.result)
                    } else {
                        alert("非法的数据")
                    }
                }
            })
        })
    )
</script>

def home(request):
    if request.method == "POST":
        # 可以用来判断当前的请求方式是否是Ajax
        print(request.is_ajax()) # True
        # print(type(request.body.decode("utf-8")[0]))
        # 获取普通的键值对数据只需要通过 POST方法
        data = request.POST
        print(data)  # <QueryDict: {'numberOne': ['2'], 'numberTwo': ['2']}>
        # 获取form对象中的文件数据也要借助 FILES
        print(request.FILES)  # <MultiValueDict: {'file': [<InMemoryUploadedFile: avatar.jpg (image/jpeg)>]}>
        return JsonResponse({"code": 200, "result": "ok"})
    return render(request, "home.html", locals())

2. django自带的序列化组件

2.1 基于jsonresponse序列化数据

from app01.models import User
def get_user(request):
    # 查询所有用户数据
    user_data_list = []
    user_queryset = User.objects.all()
    for user_obj in user_queryset:
        user_data_list.append(
            {
                "username": user_obj.username,
                "age": user_obj.age,
                "gender": user_obj.get_gender_display()
            }
        )
    print(user_data_list)
    return JsonResponse(user_data_list, safe=False)

前端显示js格式的数据

[
{
"username": "serein",
"age": 18,
"gender": "female"
},
{
"username": "zzp",
"age": 28,
"gender": 2
},
{
"username": "xyk",
"age": 22,
"gender": "female"
}
]

2.2 基于Django自带的serializers

# 使用内置的serializers
def get_user(request):
    # 查询所有用户数据
    user_queryset = User.objects.all()
    user_data_list = serializers.serialize('json', user_queryset)
    # format参数如下，
    # BUILTIN_SERIALIZERS = {
    #     "xml": "django.core.serializers.xml_serializer",
    #     "python": "django.core.serializers.python",
    #     "json": "django.core.serializers.json",
    #     "yaml": "django.core.serializers.pyyaml",
    #     "jsonl": "django.core.serializers.jsonl",
    # }
    print(user_data_list)
    return JsonResponse(user_data_list, safe=False)

前端展示

"[{\"model\": \"app01.user\", \"pk\": 1, \"fields\": {\"username\": \"serein\", \"age\": 18, \"gender\": 1}}, {\"model\": \"app01.user\", \"pk\": 2, \"fields\": {\"username\": \"zzp\", \"age\": 28, \"gender\": 2}}, {\"model\": \"app01.user\", \"pk\": 3, \"fields\": {\"username\": \"xyk\", \"age\": 22, \"gender\": 1}}]"

标签：val,request,number,django,Ajax,result,序列化,data,user
From： https://www.cnblogs.com/Formerly/p/18102499

Ajax和django自带序列化组件

Ajax和django自带序列化组件

1.Ajax

1.1 Ajax介绍

1.2 发送请求方式

1.3 Ajax案例

1.3.1 JS实现

1.3.2 Ajax基础实现

1.3.3 渲染json 数据

1.4 Ajax语法总结

1.5 前后端传输数据的编码格式(contentType)

1.6 Ajax传输文件数据

2. django自带的序列化组件

2.1 基于jsonresponse序列化数据

2.2 基于Django自带的serializers

相关文章

赞助商

阅读排行