Django中的Ajax的基本demo

最新推荐文章于 2024-04-03 15:40:02 发布

南星叨叨

最新推荐文章于 2024-04-03 15:40:02 发布

阅读量135

点赞数

分类专栏： # django 文章标签： python ajax jquery

本文链接：https://blog.csdn.net/hans99812345/article/details/112644963

版权

django 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

初识Ajax:
Ajax并不是一门新的语言，它其实就是基于js写的一个功能模块而已
由于原生js书写ajax较为繁琐，django中我们一般直接使用jQuery封装好的ajax模块

案例：
页面上有是三个input框，一个按钮，用户在前两个框中输入数字，点击按钮保证页面不刷新的情况下将数据发到后端做计算，再将计算好的结果发送给前端展示到第三个input框中

ajax基本语法结构

$.ajax({
		// 1. 到底朝哪个后端提交数据
		url:'', // 控制数据的提交路径 （有三种方法，与form表单的action属性一致）
		// 2. 指定当前请求方式
		type: 'xxx',
		// 3. 提交的数据
		data: {1标签id:$('#1标签id').val(),2标签id:$('#2标签id').val()},
		// 4. ajax是异步提交，所以需要给一个回调函数来处理返回的结果
		success:function(data){// data就是异步提交的返回结果
						// 将异步回调函数的结果通过DOM操作渲染到第三个input框中
						$(3标签id).val(data)
		}
})

urls

from django.urls import path
from demoapp import views

urlpatterns = [
    path('',views.index),
    path('add/',views.add),
]

views

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request,'index.html')

def add(request):
    if request.method == 'POST':
        i1 = request.POST.get('i1')
        i2 = request.POST.get('i2')
        i3 = int(i1)+int(i2)
        return HttpResponse(i3)
    return render(request,'index.html')

templates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3">
<button id="d1">按钮</button>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $('#d1').click(function () {
        $.ajax({
            url:'add/',
            type:'post',
            data:{
                'i1':$('#i1').val(),
                'i2':$('#i2').val()
            },
            success:function (data) {
                $('#i3').val(data)
            }
        })
    })
</script>
</body>
</html>

南星叨叨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django中的Ajax的基本demo

初识Ajax: Ajax并不是一门新的语言，它其实就是基于js写的一个功能模块而已由于原生js书写ajax较为繁琐，django中我们一般直接使用jQuery封装好的ajax模块案例：页面上有是三个input框，一个按钮，用户在前两个框中输入数字，点击按钮保证页面不刷新的情况下将数据发到后端做计算，再将计算好的结果发送给前端展示到第三个input框中ajax基本语法结构$.ajax({ // 1. 到底朝哪个后端提交数据 url:'', // 控制数据的提交路径（有三种方法，与f
复制链接

扫一扫