Ajax学习--Ajax的使用与案例

浏览器向网站发送请求时：

以URL和表单的形式提交

GET
POST

特点：提交时页面会刷新

除此之外，也可以基于Ajax向后台发送请求（页面不会刷新，只局部更新）

依赖jQuery

编写Ajax代码

$.ajax({
	url:"发送的地址",
	type: "get",
	data:{
		n1:123,
		n2:456
	},
	success:function(res){
		console.log(res);
	}
})

GET请求

新建myproject/app01/views/task.py

from django.shortcuts import render,HttpResponse


def task_list(request):
    """任务列表"""
    return render(request, "task_list.html")

def task_ajax(request):
    print(request.GET)
    return HttpResponse("成功了")

修改myproject/myproject/urls.py

1.导入task

from app01.views import depart, pretty, user, admin, account, task

2.添加URL　

#任务管理
   path('task/list/', task.task_list),

　　path('task/ajax/', task.task_ajax),

新建myproject/app01/templates/task_list.html（基于doom绑定事件）

{% extends 'layout.html' %}


{% block content %}
    <div class="container">
        <h1>任务管理</h1>
        <h3>示例1</h3>
        <input type="button" value="点击" class="btn btn-primary" onclick="clickMe();">
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        function clickMe() {
            $.ajax({
                url: '/task/ajax/',
                type: "get",
                data: {
                    n1: 123,
                    n2: 456
                },
                success: function (res) {
                    console.log(res);
                }
            })
        }
    </script>
{% endblock %}

{% block js %}
{% endblock %}对应myproject/app01/templates/layout.html

myproject/app01/templates/layout.html添加任务管理

浏览器看下效果吧

值已经传过去了

后台输出

POST请求

修改myproject/app01/views/task.py

csrf_exempt可以免除在HTM中写CSRF

from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt

def task_list(request):
    """任务列表"""
    return render(request, "task_list.html")

@csrf_exempt
def task_ajax(request):
    #GET请求
    print(request.GET)
    #POST请求
    print(request.POST)
    return HttpResponse("成功了")

修改myproject/app01/templates/layout.html

{% block js %}
    <script type="text/javascript">
        function clickMe() {
            $.ajax({
                url: '/task/ajax/',
                type: "post",
                data: {
                    n1: 123,
                    n2: 456
                },
                success: function (res) {
                    console.log(res);
                }
            })
        }
    </script>
{% endblock %}

浏览器访问测试

后台

对上面的Ajax代码进行优化: 基于jQuery绑定事件

修改myproject/app01/templates/task_list.html

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <h1>任务管理</h1>
        <h3>示例1</h3>
        <input id="btn1" type="button" value="点击" class="btn btn-primary"/>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            {#  页面框架加载完成之后代码自动执行  #}
            bindBtn1Event();
        })

        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: {
                        n1: 123,
                        n2: 456
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })

        }
    </script>
{% endblock %}

ajax请求返回值

不会返回页面，一般返回JSON格式

修改myproject/app01/views/task.py

import json
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

def task_list(request):
    """任务列表"""
    return render(request, "task_list.html")

@csrf_exempt
def task_ajax(request):
    #GET请求
    print(request.GET)
    #POST请求
    print(request.POST)

    data_dict = {"status": True, 'data': [11,22,33,44]}
    return HttpResponse(json.dumps(data_dict))

    # json_string = json.dumps(data_dict)
    # return HttpResponse(json_string)

    # return JsonResponse(data_dict)

修改myproject/app01/templates/task_list.html

{% block js %}
    <script type="text/javascript">
        $(function () {
            {#  页面框架加载完成之后代码自动执行  #}
            bindBtn1Event();
        })

        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: {
                        n1: 123,
                        n2: 456
                    },
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })

        }
    </script>
{% endblock %}

浏览器查看下吧

实现后台接收输入框中的内容

修改myproject/app01/templates/task_list.html

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <h1>任务管理</h1>
        <h3>示例1</h3>
        <input id="btn1" type="button" value="点击" class="btn btn-primary"/>

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

    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            {#  页面框架加载完成之后代码自动执行  #}
            bindBtn1Event();
            bindBtn2Event();
        })

        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: {
                        n1: 123,
                        n2: 456
                    },
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })

        }

        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: {
                        name: $("#txtuser").val(),
                        age: $("#txtAge").val()
                    },
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })

        }
    </script>
{% endblock %}

假如前端代码过多,我们需要用更简单的方法批量处理

修改myproject/app01/templates/task_list.html

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <h1>任务管理</h1>
        <h3>示例1</h3>
        <input id="btn1" type="button" value="点击1" class="btn btn-primary"/>

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

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

    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            {#  页面框架加载完成之后代码自动执行  #}
            bindBtn1Event();
            bindBtn2Event();
            bindBtn3Event();
        })

        function bindBtn1Event() {
            $("#btn1").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: {
                        n1: 123,
                        n2: 456
                    },
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })

        }

        function bindBtn2Event() {
            $("#btn2").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: {
                        name: $("#txtuser").val(),
                        age: $("#txtAge").val()
                    },
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })

        }

        function bindBtn3Event() {
            $("#btn3").click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: "post",
                    data: $("#form3").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })

        }
    </script>
{% endblock %}

这样,我们就学会了如何在浏览器页面不刷新的情况下,如何向后台提交数据

posted @ 2023-10-26 17:33 可可eleven 阅读(248) 评论(0) 收藏举报

刷新页面返回顶部

kekeeleven

Ajax学习--Ajax的使用与案例

GET请求

POST请求

公告