zoukankan      html  css  js  c++  java
  • 西游之路——python全栈——初识Ajax及简单应用

    一、Ajax操作流程

    1、基本介绍

      对话框添加,删除,修改

        添加:

          Ajax偷偷向后台发请求:

            1、下载引入jQuery

            2、Ajax     

    $.ajax({
    
       url: "/add_classes.html",
       type: "POST",
       data: {"username":"root","password":"123"}
       success: function(arg){
         //回调函数,arg是服务端返回的数据
       }
    })

      2、Ajax.py文件

    from django.shortcuts import render,redirect,HttpResponse
    
    def ajax1(request):
        return render(request,"ajax1.html")
    
    def ajax2(request):
        user = request.POST.get("username")
        pwd = request.POST.get("password")
        import time
        time.sleep(5)
        return HttpResponse("我愿意")
    
    def ajax3(request):
        v1 = request.GET.get("v1")
        v2 = request.GET.get("v2")
        try:
            v3 = int(v1) + int(v2)
        except Exception as e:
            v3 = "输入格式有误"
        print(v3)
        return HttpResponse(v3)
    
    

      

    2、Ajax.html文件操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .btn{
                display: inline-block;
                padding: 5px 15px;
                background: darkgoldenrod;
                color: white;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
    
    <div>
        <input type="text" placeholder="用户名" id="username" >
        <input type="password" placeholder="密码" id="password" >
        <div class="btn" onclick="submitForm();">提交</div>
    </div>
    <div>
        <input type="text" placeholder="数字" id="i1" >
        +
        <input type="text" placeholder="数字" id="i2" >
        <div class="btn" onclick="addForm();">等于</div>
        <input type="text" placeholder="和" id="i3" >
    </div>
    <script  src="/static/jquery-3.1.1.js" ></script>
    <script>
        function submitForm() {
            var u = $('#username').val();
            var p = $('#password').val();
            console.log(u,p);
            $.ajax({
                url: "/ajax2.html",
                type: "POST",
                data: {username:u, password:p},       {# js里字典可以不加引号 #}
                success: function (arg) {
                    console.log(arg);
                }
            })
        }
        function addForm() {
            var v1 = $('#i1').val();
            var v2 = $('#i2').val();
            $.ajax({
                url: "/ajax3.html",
                type: "GET",
                data: {v1:v1, v2:v2},
                success: function (arg) {
                    console.log(arg);
                    $('#i3').val(arg);
                    // JS主动刷新页面
                    // window.location.reload();
                }
            })
        }
    </script>
    
    </body>
    </html>
    

      

    三、用Ajax删除学员

      ajax.html操作

        <script  src="/static/jquery-3.1.1.js" ></script>
        <script>
            //removeStudent参数前后需不一致
            function removeStudent(ths) {
                var nid = $(ths).parent().parent().attr("nid");
                $.ajax({
                    url: "/ajax4.html",
                    type: "GET",
                    data: {nid:nid},
                    success: function (arg) {
                        if (arg == "成功") {
                            //window.location.reload();
                            $(ths).parent().parent().remove();
                        }else{
                            alert(arg);
                        }
                    }
                })
            }
        </script>
    

      ajax.py操作

    from app01 import models
    def ajax4(request):
        nid = request.GET.get("nid")
        msg = "成功"
        try:
            models.Students.objects.filter(id=nid).delete()
        except Exception as e:
            msg = str(e)
        return HttpResponse(msg)
    

      

  • 相关阅读:
    3.26
    3.25
    3.24
    3.23 JS学习
    3.22 团队作业1 疫情数据可视化
    3.19 个人作业1源码
    3.18 个人作业源码
    5.06python
    5.05Android
    5.04Android
  • 原文地址:https://www.cnblogs.com/Lujun1028/p/9577862.html
Copyright © 2011-2022 走看看