一、ajax

  ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可以是json数据)。实际上就是在JavaScript语句里用ajax可以向服务器发送请求。

  两大特点:

  1,异步交互

  2,页面局部刷新

  语法:

基于jQuery:
<script>
$('.cc').click(function(){ #当我们点击‘.cc’这个类的时候就会触发ajax请求
$.ajax({
url:'/name/', #请求的路径
type:'post', #请求的方式
data:{csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),user:$('[name="user"]').val()}, #请求的数据
success:function (data) { #这是请求成功后的回调函数
if (data.name){
$('.c1').html('用户名已存在');
$('.login').addClass('hide')
}
}
})
});
</script>

  1,基于ajax请求的注册页面

  1.1 register.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/js/bootstrap.js"></script>
</head>
<body>
{% csrf_token %}
<div class="container">
{% csrf_token %}
<div class="row">
<div class="col-md-5">
<div style="color: blue;font-size: 20px">注册页面</div>
<div>
名字 <input type="text" name="user" class="form-control"><span class="c1" style="color: red"></span>
</div>
<div >
密码 <input type="password" name="pwd" class="form-control"><span class="c2" style="color: red"></span>
</div>
<button class="register">注册</button>
</div>
</div>
</div>
<script>
$('[name="user"]').focus(function () {
$('.c1').html('');
$('.register').removeClass('hide')
});
$('[name="pwd"]').focus(function () {
$('.c2').html('');
$('.register').removeClass('hide')
});
$('[name="user"]').blur(function () {
$.ajax({
url:'/name/',
type:'post',
data:{csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(),user:$('[name="user"]').val()},
success:function (data) {
if (data.name){
$('.c1').html('用户名已存在');
$('.register').addClass('hide')
}
}
})
});
$('[name="pwd"]').blur(function () {
var pwd=$(this).val();
if (pwd.length < 10){
$('.c2').html('长度小于10');
$('.register').addClass('hide')
}
});
$('.register').click(function () {
var name = $('[name="user"]').val();
var pw = $('[name="pwd"]').val();
$.ajax({
url: '/registr/',
type: 'post',
data: {csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(), user: name, pwd: pw},
success: function (data) {
if (data.state) {
location.href = '/login/'
}
else {
$('p').html('注册不成功')
}
}
})
})
</script>
</body>

  1.2 views.py

def registr(request):
if request.method=='GET':
return render(request, 'registr.html')
else:
dic={'state':None}
name=request.POST.get('user')
pwd=request.POST.get('pwd')
obj=UserInfo.objects.create(name=name,pwd=pwd)
if obj:
dic['state']=True
return JsonResponse(dic) def name(request):
dic={'name':None}
name=request.POST.get('user')
obj=UserInfo.objects.filter(name=name).first()
if obj :
dic['name']=True
return JsonResponse(dic)

  1.3 呈现出来的页面

  当我们在名字栏输入数据后并且失去焦点后,就会触发一个ajax请求,它会把写在名字栏的数据发到服务器,服务器从数据库判断是否用户名已经存在,然后给ajax返回一个结果。这整个过程中,页面是不会刷新的。只是通过JavaScript在页面上添加节点而已

  二、文件上传

  1,请求头contentType:指的请求体的打包方式,总共有三种类型

  1.1 application/x-www-form-urlencoded

  这是post请求方式最常见的打包方式,如果不进行设置,都会默认这种打包方式。浏览器的原生form表单,如果不设置enctype属性,就默认这种方式打包数据。

user=alex&pwd=123    这就是这种方式打包后的数据结构

  1.2 multipart/from-data

  基于form表单上传文件,就必须让form表单的enctype等于multipart/form-data

  基于ajax上传文件时,我们就要用到Formdata类

$('.submit').click(function () {
var formdata=new FormData();
formdata.append('file',$('.file')[0].files[0]); #插入上传文件的内容
$.ajax({
url:'/file/',
type:'post',
contentType:false, #这一句和下一句是必须加上的
processData:false,
data:formdata,
success:function (data) {
$('.c1').html(data)
}
})
})

  1.3 application/json

  在用ajax请求时,可以把contentType改成json,但此时的数据类型就必须json数据类型

如果不用Json类型打包的话,ajax也会默认urlencoded模式打包,数据书写格式为:
data:{user:'hh',pwd:123}
但当设置contentType='json',此时数据打包方式就变了,数据必须是json格式,所以现在该如下面这样写
data:JSON.strinigfy({user:'hh',pwd:123})

  2,基于form表单的文件上传

  2.1 HTML文件

<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="file">
<input type="submit">
</form>

  2.2 视图

def file(request):
if request.method=='GET':
return render(request,'file.html')
else:
file_obj=request.FILES.get('file')
name=file_obj.name
with open(os.path.join('imgs',name),'wb') as f:
for line in file_obj:
f.write(line)
return HttpResponse('上传成功')

  3,基于ajax的文件上传

  3.1 HTML文件

 <input type="file" class="file">
<input type="button" class="submit" value="submit">
<p class="c1"></p>
<script>
$('.submit').click(function () {
var formdata=new FormData();
formdata.append('file',$('.file')[0].files[0]);
$.ajax({
url:'/file/',
type:'post',
contentType:false,
processData:false,
data:formdata,
success:function (data) {
$('.c1').html(data)
}
})
})
</script>

  3.2 视图

def file(request):
if request.method=='GET':
return render(request,'file.html')
else:
file_obj=request.FILES.get('file')
name=file_obj.name
with open(os.path.join('imgs',name),'wb') as f:
for line in file_obj:
f.write(line)
return HttpResponse('上传成功')

ajax与文件上传的更多相关文章

  1. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  2. Ajax 与文件上传

    一 Ajax篇 1 ajax简介(Asynchronous Javascript And XML) 异步,Js,XML,即使用Javascript语言与服务器进行异步交互,传输的数据为xml(可扩展标 ...

  3. 基于 Django的Ajax实现 文件上传

    ---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax ...

  4. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  5. python django + js 使用ajax进行文件上传并获取上传进度案例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  7. Django学习笔记之Ajax与文件上传

      Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

  8. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  9. ajax异步文件上传和进度条

    一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...

随机推荐

  1. python 实践项目 强密码检测

    需求:写一个函数,它使用正则表达式,确保传入的口令字符串是强口令.强口令的定义是:长度不少于 8 个字符,同时包含大写和小写字符,至少有一位数字.你可能需要用多个正则表达式来测试该字符串,以保证它的强 ...

  2. 微信浏览器Ajax请求返回值走error

    微信浏览器Ajax post请求是返回值走的error $.ajax({ type: "POST", url: "https://XXXX", cache: f ...

  3. (PMP)第9章-----项目资源管理

    9.1 规划资源管理 数据表现: 1.层级型(高层次的角色):工作分解结构,组织分解结构,资源分解结构 2.责任分配矩阵:RAM,RACI,执行,负责,咨询,知情(只有一个A) 3.文本型(记录详细职 ...

  4. php判断语句

    编写代码时,可以为不同的情况执行不同的动作.可以使用判断条件语句来实现. if...else...elseif 例子一: <?php $t=date("H"); if ($t ...

  5. pyhon_day1 格式化输出

    格式化输出 我们在写Python的在很多时候输出的内容需要规定格式的,这样就引入到了格式化输出 定义: 盗用下大咖的例子: ------------ info of alex ----------- ...

  6. Beta冲刺 (1/7)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 熟悉并编写小程序的自定义控件 展示G ...

  7. bash编程-cut、printf

    1. cut cut命令用于从行中截取字符串. SYNOPSIS cut OPTION... [FILE]... ** OPTION** -d CHAR:以指定的字符为分隔符(不要用空格作为分隔符): ...

  8. Centos安装Grafana

    下载:https://grafana.com/grafana/download $ wget wget https://s3-us-west-2.amazonaws.com/grafana-relea ...

  9. Math.round(),Math.ceil(),Math.floor()

    Math.round() :round周围,求一个附近的 整数 小数点后第一位 < 5 正数:Math.round(10.48)       //  10 负数:Math.round(-10.4 ...

  10. interface中定义default方法和static方法

    interface的default方法和static方法 接口中可以定义static方法,可通过接口名称.方法名()调用,实现类不能继承static方法: 接口中可以定义default方法,defau ...