开发笔记-----Ajax 基础使用
2024-09-07 18:45:07
一、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'),
]
最新文章
- iOS开发——高级篇——二维码的生产和读取
- function语句和function表达式的随笔
- Python札记 -- 装饰器补充
- 16、WPF中的命令
- Visual Studio中的一些较大的文件的作用
- 『重构--改善既有代码的设计』读书笔记----Extract Method
- RSA算法python实现
- Unity 单元测试(PLUnitTest工具)
- 开涛spring3(6.2) - AOP 之 6.2 AOP的HelloWorld
- 重写equals时,遵守的规定
- session会话管理
- 数据库升级到mysql5.7出现的1067 - Invalid default value for &#39;字段名&#39; (docker版)
- inode满处理
- 洛谷P1072 Hankson的趣味题
- LeetCode 905 Sort Array By Parity 解题报告
- Run tomcat on port 80 not 8080
- springmvc接收jquery提交的数组数据
- 这个代码给所有带有name属性的链接加了一个背景色
- tcpdump 学习
- 使用ggbio在R中制作弦图
热门文章
- 合并区间 leetcode
- Windows 10 64位操作系统 下安装、配置、启动、登录、连接测试oracle 11g
- javascript 无限分类
- 鸿蒙内核源码分析(文件概念篇) | 为什么说一切皆是文件 | 百篇博客分析OpenHarmony源码 | v62.01
- 鸿蒙内核源码分析(自旋锁篇) | 当立贞节牌坊的好同志 | 百篇博客分析OpenHarmony源码 | v26.02
- docker run 参数
- P5644-[PKUWC2018]猎人杀【NTT,分治】
- Sentry 监控 - Snuba 数据中台架构简介(Kafka+Clickhouse)
- vue 中级基础考察面试题
- Nginx安装及核心配置解析