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)
    

      

  • 相关阅读:
    C语言 · 选择排序
    C语言 · 生物芯片
    C语言 · 猜灯谜
    C语言 · x的x次幂结果为10
    C语言 · LOG大侠
    C语言 · 成绩查询系统
    C语言 · C++中map的用法详解
    C语言 · 方程的解
    斯坦福大学公开课:监督学习应用,梯度下降
    斯坦福大学公开课:机器学习的动机与应用
  • 原文地址:https://www.cnblogs.com/Lujun1028/p/9577862.html
Copyright © 2011-2022 走看看