开发笔记-----Ajax 基础使用

一、GET 方式的用法：

<!--html -->
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">IDC:</label>
            <div class="layui-input-inline">
                <select id="idc_addr">
                    <option value="">选择地址</option>
                    <option value="FT">丰台</option>
                    <option value="SH">沙河</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="num" placeholder="访问最低数量或排名">
            </div>
        </div>
        <div class="layui-inline" style="">
            <button type="submit" id="btn" onclick="mycheck()" class="layui-btn">提交</button>
        </div>
    </div>
</div>

//js 配置
<script src="/static/monitor/js/echarts.min.js"></script>
<script src="/static/monitor/js/sweetalert.min.js"></script>
<script type="text/javascript">
    function mycheck(){
        chart.showLoading();
        getdata();
    }
    function getdata(){
        var idc_addr=$('#idc_addr option:selected').val();
        var num=document.getElementById("num").value;
        if(idc_addr!="" && num!=""){
            $.ajax({
                type: "GET",
                data:{"num":num ,"idc_addr":idc_addr,},
                url: "http://192.168.3.83:/sankey/",
                dataType: 'json',
                success: function (result) {
                    chart.setOption(result.data);
                    chart.hideLoading();
                }
            });
        }else{
            swal("warning","请输入查询条件!!!!","warning");
            chart.hideLoading();
        }
    }
</script>

#后台配置 django+python
def sankey_base(request):     #展示方式：xq(详情)，top(top_N)
    num = request.GET.get('num',100)     #获取和 赋默认值
    idc_addr = request.GET.get('idc_addr','FT')     #获取IDC名称
    print(num,idc_addr)
    return render(request,'monitor/home.html')

 

二、POST方式的用法：

<!-- html -->
<form  style="display: inline" onsubmit="return false" action="##" method="post">
    {% csrf_token %}
    <div>
        <label for="user_id">用户名:</label>
        <input type="text" name="username" maxlength="35" onblur="checkInput()" oninput="changeBtnable()" autofocus required id="user_id" placeholder="请输入用户名前缀"> @testmail.com
    </div><br/><br/>
    <button type="submit" id="btn" disabled onclick="add_user()" class="btn btn-primary">
        <i class="fa fa-plus" aria-hidden="true"></i> 添加用户
    </button>
</form>

//Javascript
<script type="text/javascript">
    //添加用户
    function add_user(){
        var url = window.location.href;
        var file_obj = new FormData;
        file_obj.append('username',$("#user_id").val());
        file_obj.append('csrfmiddlewaretoken',$('[name=csrfmiddlewaretoken]').val());   //获取token
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/add_user/",
            processData: false,
            contentType: false,
            data:file_obj,
            success:function(data){
                swal({
                    title: "result",
                    text: data['message'],
                    icon:data['type'],
                    type:"success"}).then(function(){
                        location.reload();     //点击确定时，重新加载页面
                   }
                );
            }
        });
    }
</script>

####views.py
def add_user(request):
    msg = ''
    if request.is_ajax():
        pwd = pwd_create()
        username = str(request.POST['username'])
        user_mail = username+mail_dc
        create_user = "echo `/opt/zimbra/bin/zmprov  ca %s '%s'   `  "%(user_mail,pwd)
        out,err = conn_server(create_user)
        if len(out[0])==37 and '-'in out[0]:
            msg = '用户创建成功!'+'\n'+'用户名: %s'%user_mail + '\n'+'密码：%s'%pwd
            return JsonResponse({'status': 200,'type':'success' ,'message':msg})
        else:
            if 'ACCOUNT_EXISTS' in err[0]:
                msg = '用户名： %s  已存在，请重新输入。'%user_mail
                return JsonResponse({'status': 200,'type':'error', 'message':msg})
    else:
        return redirect('manager:home')
        
####urls.py        
urlpatterns = [
    path('',views.home,name='home'),
    path('add_user/',views.add_user,name='add_user'),
]