前端学习之- Ajax
Ajax:页面不做刷新,直接将数据悄悄提交到后台,然后通过回调函数处理返回结果。
$.Ajax({ # 提交到后台
url:'/host', # 提交到哪里
type:'POST' # 提交方式
data:{'k1':123,'k2':'root'} # 提交数据
# 如果data中包含的不是字符串,是个列表,那么写法要使用:traditional:true 可以将列表传入后台
data:$('#add_form').serialize(), #代替上一句,将form表单里所有数据统一打包发到后台
# 注意如果data字典中还包含1个字典,这个包含的字典需要转为字符串才可以发送:JSON.stringfy({'k1','v1'})
dataType:'JSON', # 这里是jquery功能,将传回来的数据进行json解析,就不需要下面的函数再次进行解析了,下面函数中的参数就为obj对象
traditional:true, # 可以将data中的列表数据传到后台,python使用get_list来接收列表数据。
success: function(data){ # 回调函数,等待接收上面提交后的返回数据
// data是服务器端返回的字符串
var obj = JSON.parse(data);
}
error:function(){ #当前台发送了一个请求到后台,后台未捕捉到发了个未知的错误,才触发这里执行
}
})
建议:永远让服务端返回一个字典,返回方式:return HttpResponse(json.dumps(字典))
不要使用render,因为返回的模板文件只做渲染,无法json转换,不支持redirect方法。
以下这些方法全部是调用上面的Ajax方法,不同的是只修改对应的type方法,所以说只用Ajax方法即可。
$.get(url='XX',data:{},success)
$.post
前端学习之- Ajax的更多相关文章
- 前端学习——使用Ajax方式POST JSON数据包
0.前言 本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...
- 前端学习——JQuery Ajax使用经验
0.前言 在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握 上文 [FE前端学习]第二阶段任务- ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- web前端学习就这9个阶段,你属于哪个阶段?
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- 前端学习日记之HTML、CSS 简单总结
前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...
- web前端学习路线(含20个真实web开发项目集合)
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
- 前端通信:ajax设计方案(三)--- 集成ajax上传技术
在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...
随机推荐
- java5增加对https的支持
jdk1.5不支持http协议,jdk1.8默认支持,比较好的解决方案是升级jdk,但是升级jdk风险极大.不能升级jdk的情况下,可以使用如下方式. 利用httpclient,进行封装,从而实现对h ...
- php 批量依照ID建立 文件
<?php // 登录验证 include_once('inc/conn.php'); // sql查询 $sql="SELECT * FROM zcgl ";// $res ...
- 导入Excel表格(二)
1. 提取session中的数据.并进行分页操作,上传excel表格,保存到临时表格. 初始化临时表格,提交表单,判断状态是否为真,若为真,则启用 导入到数据库 的按钮:为false,让查询的url ...
- xorequation(DFS完全枚举)
题目 有一个含有N个未知数的方程如下: x1^x2^...^xn= V,给定N,V,再给定正整数a1,a2,...an满足1≤ai≤9且∏Ni=1(ai+1) ≤ 32768,请输出所有满足0≤xi ...
- 第三周:Excel
一.Excel的常见函数: 1.文本清洗函数: https://ask.hellobi.com/blog/cbdingchebao/10149
- Windows SubSystem for Linux(WSL)设置默认和设置默认登陆用户
使用wslconfig命令进行管理 1. 设置默认运行的linux系统 wslconfig /setdefault <DistributionName> 正如上面所说,如果执行wslco ...
- 已安全化的ActiveX控件卸载时出现"DllUnregisterServer函数出错,错误代码:0x80070002"问题解决
已安全化的ActiveX控件卸载时出现"DllUnregisterServer函数出错,错误代码:0x80070002"问题解决 情况一:当该控件未注册或者已经卸载时,你尝试卸 ...
- js实现复制input的value到剪切板
<button class="button-code button-copy">复制链接</button><script> $(".b ...
- ArrayList 和 LinkedList 区别。
1. ArrayList和LinkedList都是实现了List接口的容器类,用于存储一系列的对象引用.他们都可以对元素的增删改查进行操作. 2. ArrayList是实现了基于动态数组的数据结构,L ...
- 生产环境屏蔽swagger(动态组装bean)
spring动态组装bean 背景介绍: 整合swagger时需要在生产环境中屏蔽掉swagger的地址,不能在生产环境使用 解决方案 使用动态profile在生产环境中不注入swagger的bean ...