Ajax进阶
"POST":请求
POST请求：(一共三个方法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<p>姓名：<input type="text" ></p>
<p>密码：<input type="password" ></p>
<button class="cc">提交</button><span class="error"></span>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
function foo() {
$(".error").html("")
}
$(".cc").click(function () {
// 方式1：
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
});
$.ajax({
url:"/get_ajax/",
type:"POST",
#方法三：
headers:{"X-CSRFToken":$.cookie('csrftoken')},#需要引入<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js "></script>
data:{
#方法二：
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#需要加上Form表单和{% csrf_token%},
name:$(":text").val(),
pwd:$(":password").val(),
}, // 请求数据 ，是js数据 ?name=yuan&pwd=123
#这里的采用默认的数据发送格式
success:function (data) {
var data=JSON.parse(data);
console.log(data);
console.log(typeof data);
if(!data["flag"]){
$(".error").html("用户名或者密码错误"),
setTimeout(foo,10000)
}
}
})
})
</script>
</body>
文件上传：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title> </head>
<body> <form action="" method="post" enctype="multipart/form-data">#一定要加上这个方法enctype
{% csrf_token %}
<p>姓名：<input type="text" name="user"></p>
<p>文件：<input type="file" name="avatar"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
html
views函数
def upload(request):
if request.method=="GET":
return render(request,"load.html")
if request.method=="POST":
print("POST",request.POST)
print("FILES",request.FILES)
file_obj=request.FILES.get("avatar")
file_obj=request.FILES.get("upload_avatar")
with open(file_obj.name,"wb") as f:#上传文件
for i in file_obj:
f.write(i)
print(file_obj)
return HttpResponse("上传成功")
formdata上传文件：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
{% csrf_token %}
<form action="" method="post"> <p>姓名：<input type="text"></p>
<p>密码：<input type="password"></p>
<p>头像：<input type="file" id="upload_avatar"></p>
<button class="cc">提交</button><span class="error"></span>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js "></script>
<script>
function foo() {
$(".error").html("")
}
$(".cc").click(function () {
var formdata=new FormData();
formdata.append("username",$(":text").val());
formdata.append("password",$(":password").val());
formdata.append("avatar",$("#upload_avatar")[0].files[0]);
$.ajax({
url:"/upload/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:formdata,
contentType:false,
processData:false,
success:function (data) {
var data=JSON.parse(data);
console.log(data);
console.log(typeof data);
if(!data["flag"]){
$(".error").html("用户名或者密码错误"),
setTimeout(foo,10000)
}
}
})
})
</script>
</body>
</html>
views函数
def upload(request):
if request.method=="GET":
return render(request,"load.html")
if request.method=="POST":
print("POST",request.POST)
print("FILES",request.FILES)
# file_obj=request.FILES.get("avatar")
# file_obj=request.FILES.get("upload_avatar")
# with open(file_obj.name,"wb") as f:#上传文件
# for i in file_obj:
# f.write(i)
# print(file_obj)
return HttpResponse("上传成功")
Ajax进阶的更多相关文章
- jQuery基础---Ajax进阶
原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一 ...
- 第一百七十四节，jQuery，Ajax进阶
jQuery,Ajax进阶 学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 在 Ajax 课程中,我们了解了最基本的异步处理方式.本章,我 ...
- 前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式
DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...
- 20151211jquery ajax进阶代码备份
//数据处理 $('form input[type=button]').click(function() { //json处理 /*$.ajax({ type:'POST', url:'test.js ...
- 20151211Jquery Ajax进阶学习笔记
四．JSON 和 JSONP 如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件.而在非 同域下,可以使用 JSONP,但也是有条件的. //$.ajax( ...
- 20151210 Jquery 学习笔记 AJAX 进阶
一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加 ...
- Ajax进阶之原生js与跨域jsonp
什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...
- Ajax进阶 FormData对象
Ajax基础:http://www.cnblogs.com/-beyond/p/7919369.html xhr 2.0及FormData介绍 FormData对象 其实和 XMLHttpReques ...
- Jquery13 Ajax 进阶
学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题 ...
随机推荐
- JavaWeb学习 (十八)————JSP标签
一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...
- Struts2之类型转换
jsp提交的数据全部是String类型,Struts2也是通过request.getParameter(name)取得String类型的数据,并通过拦截器将String转换成各种类型的数据,然后通过g ...
- Abp中自定义Exception的HttpStatusCode
Abp中在新版本中,抛出的异常(比如:UserFriendlyException)通过AjaxResponse封装后返回的时候,HttpStatusCode默认指定成了500. 对于一些默认封装好的处 ...
- [android] 手机卫士设备管理权限锁屏
设备管理员 Device Admin 获取DevicePolicyManager对象,通过getSystemService(DEVICE_POLICY_MANAGER),设备策略管理器 调用Devic ...
- 内存分析工具-MAT(Memory Analyzer Tool)
内存分析工具-MAT(Memory Analyzer Tool) 首先查看如下代码,main函数中有一个成员变量map,map里被循环放入对象Hanson,hanson持有姓名和age还有friend ...
- 性能监控(1)--linux下的top命令
Linux下的监控工具 top命令 top命令能够实时显示系统中各个进程的资源占用情况,其输出信息分为两部分,前半部分为系统统计信息,后半部分是进程信息. 第一行是任务队列信息,它的结果等同于upti ...
- asynchronous.js
// 异步加载js (function(){ var _asyn_js_data = ['index.js','index1.js','index2.js','index3.js'] for(var ...
- TUM数据集rgbd_benchmark工具的使用方法
# 在学习视觉slam过程中,需要对数据集合进行预处理和对slam或者跟踪结果进行评价,TUM提供一组这样的工具,为了自己以后方便查找,于是把它记录下来 一.RGBD_Benchmark工具下载链接: ...
- ArcGIS地图文档优化 mxdPerfstat工具使用体验
经常有客户会咨询到如何提高地图的显示性能.为何ArcMap刷新地图那么缓慢.为何地图服务响应要等待10多秒? 诸如这些问题,虽然它们的表象都是相似的,但是往往在分析排查问题的时候,我们发现背后的原因是 ...
- 程序员Web面试之jQuery
又到了一年一度的毕业季了,青春散场,却等待下一场开幕. 在求职大军中,IT行业的程序员.码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了成千上万的程序员投身其中追求自己的梦 ...