django ajax弹窗请求后端例子

例子

微信截图_20220808155311

django后端代码

def cs(request):
   
    name = request.POST.get("name",None)
        
    return JsonResponse({"code": 1,"name": name})

前端代码

<!doctype html>
<html lang="zh-CN">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <title>在线开通宝塔</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="https://ajiho.gitee.io/bootstrap-notify/example/bootstrap-5.1.3-dist/css/bootstrap.css">
    <link rel='stylesheet' id='app-css' href="http://bt.qingningz.cn/index/css/app.css" media='all' />
  


    <style>
        .captcha_div {
            position: relative;
        }

        #geetest_captcha {
            margin-bottom: 15px;
        }

        .geetest_holder {
            width: 100% !important;
        }

        .geetest_btn_svg {
            display: none;
        }

        .login-captcha {
            height: 39px;
            width: 106px;
            cursor: pointer;
            box-sizing: border-box;
            border: 1px solid #e6e6e6;
            border-radius: 2px !important;
            position: absolute;
            right: 0;
            top: 0;
        }

        .layui-form-checkbox {
            display: none;
        }
    </style>
</head>

<body
    class="page-template page-template-pages page-template-page-login page-template-pagespage-login-php page page-id-1209 navbar-sticky pagination-infinite_button no-off-canvas sidebar-right">
    <div id="app" class="site">

        <div lass="header-gap"></div>

        <main id="main" role="main" class="site-content">
            <div class="bg-img-cover" style="background-image: url('https://api.ixiaowai.cn/mcapi/mcapi.php')"></div>
            <div class="container">
                <div class="row justify-content-center align-items-center login-warp">
                    <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5">
                      
                        <!-- Form -->
                        <div class="layui-form js-validate card p-lg-5 p-4">
                            <div class="d-flex flex-center mb-4">
                                <div class="logo-wrapper">
                                    <a href="/">
                                        <!-- Form <img class="logo regular" src="/upload/images/20220610/21f5f6ca52ca86c0b8abf2339fe60c08.png" alt="在线开通宝塔主机" style="width:162px;">-->
                                    </a>

                                </div>
                            </div>
                            <!-- Title -->
                           
                            <div class="mb-4 login-page-title">
                              <h1 align="center">青柠</h1>
                              <h1 align="center">在线开通宝塔主机</h1>
                            </div>
                            <!-- //第三方登录 -->
                            <div class="card border-0 shadow-sm">
                                <div class="card-body">
                                    <button class="btn btn-success" id="bt">宝塔主机</button>
                                    <button class="btn btn-success" id="kangle">kangle主机</button>
                                    <button class="btn btn-success" id="help">帮助</button>
                                    <button class="btn btn-success" id="tj">问题提交</button>
                                    <p></p>
                                    
                                    
                                </div>
                            </div>
  
                           

                            <!-- //第三方登录 -->
                            <div class="card border-0 shadow-sm">
                              <div class="card-body">
                                  <h6>开通主机请遵循以下条例</h6>
                                  <p><font color="red">1.严禁搭建非法网站!</font></p>
                                  <p><font color="red">2.严禁在短时间内开通数十个主机,否则会被系统监测永久封锁!</font></p>
                                  <p><font color="red">3.本系统本来就是公益行为,没有任何盈利手段,请勿恶意破坏(ddos,cc攻击行为)</font></p>
                                  <p><font color="#00FF00"><h4>本站倡导大家手上有多余服务器可以捐赠过来,供大家免费使用,一起投身于公益事业当中来。</h4></font></p>
                              </div>
                          </div>

                        </div>

                    </div>

                </div>
            </div>

        </main>

    </div>


    <!-- js部分 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootdialog@0.0.1/dist/js/bootdialog.min.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@ajiho/bootstrap-notify@1.0.1/dist/js/bootstrap-notify.min.js"></script>
    <script>
        var btn = document.querySelector('#bt');
        btn.addEventListener('click', function () {
            BootDialog.fire({
    title: '宝塔主机开通',
    body: `
            <form>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">用户名:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="mb-3">
                <label for="message-text" class="col-form-label">密码:</label>
                <textarea type="password"class="form-control" id="message-text"></textarea>
              </div>
            </form>
    `,
    
    footer: `
            <button type="button" class="btn btn-primary send-btn">开通</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
           
    `,
    
    onCreate: function (modal) {
    
        modal.element.onclick = function (event) {
        event.preventDefault()
        
        var form = modal.element.querySelector('form');
        
            if (event.target.classList.contains('send-btn')) {
            
                var Recipient = form.querySelector('#recipient-name').value;
                var Message = form.querySelector('#message-text').value;
                $(function () {
                
                // 发起ajax请求
                $.ajax({
                  url: "http://127.0.0.1:8000/cs/",  // 请求的地址
                  type: "post",  // 请求方式
                  // 请求时传递过去的数据
                  data: {
                    "name": Recipient,
                    
                   
                  },
                  dataType: "json",  // 返回的数据格式
                  async: true,  // 异步的ajax
                  
                }).then(function (data) {

                    if (data.code == 1) {
                        
                         // 请求成功实现页面跳转
                         BootstrapNotify.show({
                            header: '开通成功',
                            body: data.name,
                            dismissBtnShow: false,
                            autohide: false,
                            type: 'success',
                            placement: 'top-center'
                        });

                       
                    }
                    else  {
                        pass

                        
                    } 
                    
                   
                  

                })
              })
                
                
            }
        }
    }
})


        });


        var btn = document.querySelector('#kangle');
        btn.addEventListener('click', function () {
            BootDialog.fire({
    title: 'kangle主机开通',
    body: `
            <form>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">用户名:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="mb-3">
                <label for="message-text" class="col-form-label">密码:</label>
                <textarea type="password"class="form-control" id="message-text"></textarea>
              </div>
            </form>
    `,
    
    footer: `
            <button type="button" class="btn btn-primary send-btn">开通</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
           
    `,
    
    onCreate: function (modal) {
    
        modal.element.onclick = function (event) {
        event.preventDefault()
        
        var form = modal.element.querySelector('form');
        
            if (event.target.classList.contains('send-btn')) {
            
                var Recipient = form.querySelector('#recipient-name').value;
                var Message = form.querySelector('#message-text').value;
                $(function () {
                
                // 发起ajax请求
                $.ajax({
                  url: "http://127.0.0.1:8000/cs/",  // 请求的地址
                  type: "post",  // 请求方式
                  // 请求时传递过去的数据
                  data: {
                    "pay": Recipient,
                    
                   
                  },
                  dataType: "json",  // 返回的数据格式
                  async: true,  // 异步的ajax
                  
                }).then(function (data) {

                    if (data.code == 1) {
                        
                         // 请求成功实现页面跳转
                         BootstrapNotify.show({
                            header: '开通成功',
                            body: '请前往登录。登录地址:http://mbt.qncs.xyz/',
                            dismissBtnShow: false,
                            autohide: false,
                            type: 'success',
                            placement: 'top-center'
                        });

                       
                    }
                    else  {
                        pass

                        
                    } 
                    
                   
                  

                })
              })
                
                
            }
        }
    }
})


        });
    </script>

</html>
© 版权声明
THE END
喜欢就支持一下吧
点赞7赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片