本文介绍: 页面上有三个input框,前两个输入数字点击提交,朝后端发送ajax请求,后端计算结果返回前端动态展示第三input框中,整个页面不能刷新,也不能在前端计算。真正的ajax原生需要使用js操作jqajax方法是对原生js封装,方便咱们使用前后分离项目中,我们使用一个第三方库,实现 js和后端异步交互axios)3.form表单 —–》get请求post请求。4.ajax —–》 get请求、post请求。2.a标签href属性 —–》get请求。

特点:

        异步提交

        局部刷新

例子github注册

动态获取用户名实时的跟后端确认实时展示前端(局部刷新) 

朝后端发送请求的方式

        1.浏览器地址栏直接输入url回车 —–》get请求

        2.a标签href属性  —–》get请求

        3.form表单 —–》get请求、post请求

        4.ajax —–》 get请求、post请求

真正的ajax原生需要使用js操作jqajax方法是对原生js封装,方便咱们使用

(其他框架可以原理是一样的)

前后混合项目中,我们通常使用jq的ajax实现 js和后端异步交互
        jq操作dom
        jq发ajax请求
前后分离项目中,我们会使用一个第三方库,实现 js和后端异步交互axios
 

一个例子

页面上有三个input框,前两个输入数字点击提交,朝后端发送ajax请求,后端计算结果返回前端动态展示第三input框中,整个页面不能刷新,也不能在前端计算

html代码

<!DOCTYPE html>
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <title&gt;Title</title&gt;
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"&gt;</script&gt;
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;</script>
</head>
<body>
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<button id="btn">提交</button>
<script>
    // 先给按钮一个点事件
    $('#btn').click(function (){
        // 朝后端发送ajax请求
        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:'', // 不写就是当前地址提交
            // 2.请求方式
            type:'post', // 不指定就是get,都是小写
            // 3.数据
            data:{'l1':$('#d1').val(),'l2':$('#d2').val()},
            // 4.回调函数:当后端给你返回结果的时候自动触发 args接收后端返回的结果

            success:function (args) {
                $('#d3').val(args)
                
            }
        })
    })
</script>
</body>
</html>

views代码

from django.shortcuts import render,HttpResponse


def ab_ajax(request):
    if request.method=='POST':
        l1 = request.POST.get('l1')
        l2 = request.POST.get('l2')
        #先转成整型再加
        l3=int(l1)+int(l2)

        return HttpResponse(l3)

    return render(request,'ajax.html')

原文地址:https://blog.csdn.net/flclyz/article/details/134787867

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_42756.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注