前端学习之- 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上传技术
在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...
随机推荐
- Android学习笔记(十八) Socket
Socket在计算机网络中的概念是指套接字,包含IP地址和端口号.在Java编程中Socket是一个类,用来实现数据传输(同样可以理解为“套接字”).传输的协议包括UDP和TCP,前者为不可靠的无连接 ...
- Java Web MVC实例
开发环境 Eclipse Java EE IDE for Web Developers. Version: Luna Service Release 2 (4.4.2) tomcat:7.0 数据库: ...
- MyBatis学习(四)
前言 最近比较松懈,下班回家后也懒得学习了.今晚实在是看不下去了,争取时间学习.社会上有这么多的资源,就看谁能抢的多吧.今天就说说MyBatis的动态SQL吧 正文 动态 SQL 通常要做的事情是有条 ...
- umask命令
umask——显示.设置文件的缺省权限 the user file-creation mask 命令所在路径:Shell内置命令 示例1:显示缺省权限 # umask -S 参数S的作用是以rwx形式 ...
- 伪类的格式重点:父标签层级 & 当前标签类型
伪类的格式重点:父标签层级 & 当前标签类型 通过例子说明: css1: span:nth-of-type(2){color: red;} css2: span :nth-of-type(2) ...
- SQLite – GLOB子句
SQLite – GLOB子句 .与LIKE不同,GLOB是大小写敏感的,它遵循语法的UNIX指定以下通配符. The asterisk sign (*) The question mark (?) ...
- Vue 2.0 右键菜单组件 Vue Context Menu
Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c
- k8s集群之Docker安装镜像加速器配置与k8s容器网络
安装Docker 参考:https://www.cnblogs.com/rdchenxi/p/10381631.html 加速器配置 参考:https://www.cnblogs.com/rdchen ...
- node.js中使用Redis
服务端: 启动Redis服务: redis-server 客户端: 1.安装Redis npm install redis --save 2.redisTest.js文件 //引入red ...
- PHP03 移动互联网和PHP
学习要点 移动互联网 云计算 网络通信协议 Apache http服务器 PHP运行原理 学习目标 理解网络通信协议 掌握PHP运行原理 WAMP开发环境的搭建 移动互联网 定义 移动互联网,就是 ...