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

一、GET 方式的用法：

 1 <!--html -->
 2 <div class="layui-form">
 3     <div class="layui-form-item">
 4         <div class="layui-inline">
 5             <label class="layui-form-label">IDC:</label>
 6             <div class="layui-input-inline">
 7                 <select id="idc_addr">
 8                     <option value="">选择地址</option>
 9                     <option value="FT">丰台</option>
10                     <option value="SH">沙河</option>
11                 </select>
12             </div>
13         </div>
14
15         <div class="layui-inline">
16             <label class="layui-form-label">数量</label>
17             <div class="layui-input-inline">
18                 <input type="text" class="layui-input" id="num" placeholder="访问最低数量或排名">
19             </div>
20         </div>
21         <div class="layui-inline" style="">
22             <button type="submit" id="btn" onclick="mycheck()" class="layui-btn">提交</button>
23         </div>
24     </div>
25 </div>
26
27 //js 配置
28 <script src="/static/monitor/js/echarts.min.js"></script>
29 <script src="/static/monitor/js/sweetalert.min.js"></script>
30 <script type="text/javascript">
31     function mycheck(){
32         chart.showLoading();
33         getdata();
34     }
35     function getdata(){
36         var idc_addr=$('#idc_addr option:selected').val();
37         var num=document.getElementById("num").value;
38         if(idc_addr!="" && num!=""){
39             $.ajax({
40                 type: "GET",
41                 data:{"num":num ,"idc_addr":idc_addr,},
42                 url: "http://192.168.3.83:/sankey/",
43                 dataType: 'json',
44                 success: function (result) {
45                     chart.setOption(result.data);
46                     chart.hideLoading();
47                 }
48             });
49         }else{
50             swal("warning","请输入查询条件!!!!","warning");
51             chart.hideLoading();
52         }
53     }
54 </script>
55
56 #后台配置 django+python
57 def sankey_base(request):     #展示方式：xq(详情)，top(top_N)
58     num = request.GET.get('num',100)     #获取和 赋默认值
59     idc_addr = request.GET.get('idc_addr','FT')     #获取IDC名称
60     print(num,idc_addr)
61     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'),
]