[Python知识库]2022暑期实践（Django教程学习记录）（第五周2）P57Ajax2

P57Ajax2
三个ajax传参的示例

{% extends 'layout.html' %}


{% block content %}
    <div class="container">
        <h1>Ajax案例</h1>

        <h3>示例1</h3>
        {#        <input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>#}
        <input type="button" class="btn btn-primary" id="btn1" value="点击1"/>

        <h3>示例2</h3>
        <input type="text" id="nameUser" placeholder="姓名">
        <input type="text" id="ageUser" placeholder="年龄">
        <input type="button" class="btn btn-primary" id="btn2" value="点击2"/>

        <h3>示例3</h3>
        <form id="form3">
            <p><input type="text" name="user" placeholder="姓名"></p>
            <p><input type="text" name="age" placeholder="年龄"></p>
            <p><input type="text" name="email" placeholder="邮箱"></p>
            <p><input type="text" name="more" placeholder="年龄"></p>
            <p><input type="button" class="btn btn-primary" id="btn3" value="点击3"/></p>
        </form>

    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        {#基于dom方法绑定事件#}
        {#function clickMe(){#}
        {#    console.log("点击了按钮");#}
        {#    $.ajax({#}
        {#        url: '/task_ajax',#}
        {#type: 'get',#}
        {#        type: 'post',#}
        {#        data: {#}
        {#            n1: 123,#}
        {#            n2: 'abc',#}
        {#        },#}
        {#        success: function (res){#}
        {#            console.log(res);#}
        {#        }#}
        {#    })#}
        {# } #}

        $(function () {
            //页面框架加载完成后自动执行
            bindBtn1Event();
            bindBtn2Event();
            bindBtn3Event();

        })

        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                    url: '/task_ajax/',
                    type: 'post',
                    data: {
                        n1: 123,
                        n2: 'abc',
                    },
                    {#将后端传过来JSON的转成字符串反序列化成JSON对象，使得前端可以直接调用#}
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.data)
                    }
                })
            })
        }

        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                    url: '/task_ajax/',
                    type: 'post',
                    data: {
                        name: $("#nameUser").val(),
                        age: $("#ageUser").val(),
                    },
                    {#将后端传过来JSON的转成字符串反序列化成JSON对象，使得前端可以直接调用#}
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.data)
                    }
                })
            })
        }

        function bindBtn3Event() {
            $("#btn3").click(function () {
                $.ajax({
                    url: '/task_ajax/',
                    type: 'post',
                    {#示例3使用表单就不用一个个的传值了#}
                    data: $("#form3").serialize(),
                    {#将后端传过来JSON的转成字符串反序列化成JSON对象，使得前端可以直接调用#}
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.data);
                    }
                })
            })
        }
    </script>
{% endblock %}