AJAX简介

　　AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，
传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
场景：

优点:

1.  不用刷新整个页面

2.  异步提交请求

在学习ajax之前先回顾一下基本的请求形式

     客户端浏览器给服务器发请求的形式:

        1 地址栏输入url 回车  默认是get请求方式

        2 form表单,用户点击submit按钮

                    --- get

                    --- post

        3 超链接标签(a标签)    默认是get请求方式

        4 Ajax请求

               ---get

               ---post

            (1) 异步

            (2) 局部刷新

基于jquery实现ajax

　　在项目中存在index.html网页

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>This is index</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>  #基于jquery要先引入jquery

</head>

<body>

{% csrf_token %}                                                           #中间组件csrf的影响,必须有csrf的认证

<h3>This is index</h3>

<button class="ajax">ajax</button>

<p class="con"></p>

<hr>

<button class="ajax2">携参ajax</button>

<hr>

<input type="text" class="num1"> + <input type="text" class="num2"> = <input type="text" class="result"><input

        type="button" class="cal" value="计算" >

<script>

    //ajax的简单使用

    $('.ajax').click(function () {                          #给.ajax类属性的标签绑定时间

        //发送ajax请求　　　　　　　　　　　　　　　　　　　　　　　#发送ajax请求

        $.ajax({

            url:'/ajax_handle/',                            #ajax必须有的几对参数1.url 提交的路径

            type:'get',

            success:function(res){　　　　　　　　　　　　　　　　　　　　　　　　　　2. type:提交的方法 post/get

                console.log(res);　　　　　　　　　　　　　　　　　　　　　　　　　　　3.success:会执行一个函数,函数有一个参数,是来自ajax提交后的返回值

                $('.con').html(res);　　　　　　　　　　　　　　　　　　　　　　　　　　#可以理解success是一个回调函数

            }

        })

    });



    //携参的ajax的使用

    $('.ajax2').click(function(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　#一样的额绑定事件,,发送请求,

        //发送ajax请求　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　#携参要带参数就是数据

        $.ajax({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　#data:{data里面一定要带钥匙csrf}

            url:'/ajax_handle2/',

            type:'post',

            data:{

                a:1,

                b:2,

                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

            },

            success:function (ret) {

                    console.log(ret)

                }

        })

    });

    //携参实例(简单的计算器)

    $('.cal').click(function(){

        let num1=$('.num1').val();

        let num2=$('.num2').val();

        console.log(num1,num2);

        //发送ajax请求

        $.ajax({

            url:'/cal/',

            type:'post',

            data:{

                n1:num1,

                n2:num2,

                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

            },

            success:function(res){

                console.log(res);

                console.log(typeof res);

                let response=JSON.parse(res);

                if (response.code == ""){

                    $('.result').val(response.data)

                }

                else{

                    alert(response.msg)

                }

            }

        })

    })

　　视图函数

from django.shortcuts import render,HttpResponse

import json

# Create your views here.

def index(request):

    return render(request,'index.html')

def ajax_handle(request):

    return HttpResponse('你好')

def ajax_handle2(request):

    return HttpResponse('我擦嘞')

def cal(request):

    response={"code":1000,"data":None,"msg":None}

    try:

        print(request.POST),

        print(request.GET),

        n1 = request.POST.get("n1")

        n2 = request.POST.get("n2")

        ret = str(int(n1) + int(n2)) #接收的是字符串,转换成数字计算完成后再转化成字符串

        response["data"]=ret

    except Exception as e :

        response["code"]=1001

        response['msg']=str(e)

    # HttpResponse只能接收字符串,用json序列化

    return HttpResponse(json.dumps(response))

　　这边需要用到数据转换的语法:

python:
　　json.dumps()
　　json.loads

在JavaScript中
　　JSON.stringify
　　JSON.pasrse

　　

　　关于ajax的总结

　　客户端浏览器通过执行一段Js代码向服务器发送一段ajax请求,服务器路由对应的视图函数返回一段Json字符串(建议用json)作为响应,
浏览器接收响应后会触发该ajax请求的回调函数success,参数为响应字符串,success内通过Dom操作将结果反应到页面上,实现局部刷新,
不像之前的请求会将响应覆盖整个页面
　　
　　ajax不要返回render,redirect这些响应,就只返回HttpResponse形式的Json字符串(要记得转换数据为Json)

文件上传

一.　　在讲文件上传之前应该明确的的是无论是form表单题号还是ajax提交,其默认的内容编码格式都是 application/x-www-form-urlencoded,是没有办法发送文件的
同时也是可以指定他们的编码格式:
1. form:

　　<form action="/put/" method="post" enctype="multipart/form-data"> 

2. ajax:

　　$(".ajax_btn2").click(function () {

　　$.ajax({
　　　　url:"/put1/",
　　　　type:"post",
　　　　contentType:"json",
　　　　data:JSON.stringify({
　　　　　　　　a:1,
　　　　　　b:2
　　　　　　　　}),
　　　　success:function (res) {
　　　　　　console.log(res)
　　　　　　}
　　　})

二.  针对post请求(有请求体)
　　浏览器   ----------------------------->  服务器

　　请求头:

　　contentType:urlencoded           ----->{'name':'xxx','age':'xxx'}

　　contentType:json               ---------->{}

　　请求体

就是说如果是urlencode编码格式的,django会把请求体放入字典,以字典形式的传递给服务器 ----------------->服务器可以到request.POST那数据
如果不是urlencode编码格式的,django就不会帮你封装           ---------------------------->,reuqest.POST是个空字典,服务器只能到request.body拿数据

基于表单form的文件上传

　　页面中:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h3>form表单上传</h3>

<form action="/put/" method="post" enctype="multipart/form-data">  #必须设置为enctype="multipart/form-data"否则服务端只能拿到文件名
{% csrf_token %} 
<input type="text" name="user">
<input type="file" name="file"> 
<input type='submit'>          #看清楚了,这边的提交按钮是input标签
</form> 

</body>
 </html>

　　在视图函数中:

from django.shortcuts import render,HttpResponse

import os

# Create your views here.

def index(request):

    return render(request,'index.html')

def put(request):

    print(request.POST)

    print(request.FILES)

    file_obj=request.FILES.get('file')  #获得文件句柄

    # path=file_obj.name

    name=file_obj.name

    with open(os.path.join('media','imgs',name),'wb') as f:  #把拿到的文件句柄循环一行一行的写入文件中

        for line in file_obj:

            f.write(line)

    return HttpResponse('上床成功')

基于ajax文件上传

index.html中

<h>ajax文件上传</h>

<form>                                  #这边的form标签只是为了把内容包起来,用div也可以

    <input type="text" class="user">

    <input type="file" class="file">

    <input type="button" class="ajax_btn2" value="ajax上传">

</form>

视图函数中

<script>

    {#ajax文件上传  #}

    $('.ajax_btn2').click(function () {

        let formdata=new FormData();

        formdata.append("user",$('.user').val());

        formdata.append('file',$(".file")[0].files[0]);

        $.ajax({

            url:'/put/',

            type:'post',

            contentType:false,                  #这两个参数必须设置,否则也不能把文件上传

            processData:false,

            data:formdata,

            success:function (res) {

                console.log(res)

            },

        })

    })

</script>
												


											
django组件之ajax的更多相关文章
	

    
								
  1. Django框架之Ajax和form组件
		
    一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
    
		
    2. 
						
  2. Django【第23篇】：利用Form组件和ajax实现的注册
		
    利用Form组件和ajax实现的注册 一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面 ...
    
		
    3. 
						
  3. django中的ajax组件
		
    目录 django中的ajax 向服务器发送请求的途径 Ajax的特点 基于jquery实现的ajax请求 利用ajax实现计算器 利用ajax实现登陆认证 利用form表单进行文件上传 利用ajax ...
    
		
    4. 
						
  4. Django组件之Form表单
		
    一.Django中的Form表单介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入 ...
    
		
    5. 
						
  5. python 全栈开发，Day78(Django组件-forms组件)
		
    一.Django组件-forms组件 forms组件 django中的Form组件有以下几个功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显 ...
    
		
    6. 
						
  6. python 全栈开发，Day76(Django组件-cookie,session)
		
    昨日内容回顾 1 json 轻量级的数据交换格式 在python 序列化方法:json.dumps() 反序列化方法:json.loads() 在JS中: 序列化方法:JSON.stringfy()  ...
    
		
    7. 
						
  7. 2.1博客系统 |基于form组件和Ajax实现注册登录
		
    基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...
    
		
    8. 
						
  8. BBS-基于forms组件和ajax实现注册功能
		
    http://www.cnblogs.com/yuanchenqi/articles/7638956.html 1.设计注册页面 views.py from django import forms c ...
    
		
    9. 
						
  9. 3- 功能2：基于forms组件和ajax实现注册功能
		
    1.forms组件的注册页面 url from django.urls import path, re_path from blog import views from django.views.st ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 字符串解压缩类库(zip、GZIP、QuickLz、snappy、lzf、jzlib)介绍
			
    1.ZIP. GZIP  计算机文件压缩算法,JDK中java.util.zip.*中实现.主要包括ZipInputStream/ ZipOutputStream.GZipInputStream/Zi ...
    
			
    2. 
						
  2. Tornado之抽屉实战(1)--分析与架构
			
    项目模拟地址:http://dig.chouti.com/ 知识点应用: AJAX  用于偷偷发请求 原生ajax jQuery  ajax($.ajax) iframe伪造 上传文件 传统Form  ...
    
			
    3. 
						
  3. 业务逻辑: Quartz的整合应用
			
    1. 请谈一下你对Quartz的理解 思路:根据他解决的什么问题方面去阐述 2. 完成quartz和spring的整合应用 思路:触发时间.任务调度工程 步骤: 1. 创建maven工程,并导入qua ...
    
			
    4. 
						
  4. 面试题: java面试经历  已看1 抢红包如何分配每个人抢到的钱  有用 难点的面试题
			
    2018.03.09 深圳乐唯科技 我看了下感觉这公司貌似挺不错的,面试官人也挺好的,氛围应该很不错,可惜我实力不足,唉,接续努力,下面把面试中印象较深的三个问题写一下. 面试问题1:数据库删除重复数 ...
    
			
    5. 
						
  5. 杭电ACM刷题（1）：1002，A + B Problem II                                                                                                         标签：               acmc语言                                            2017-05-07 15:35             139人阅读              评
			
    最近忙于考试复习,没有多少可供自己安排的时间,所以我利用复习之余的空闲时间去刷刷杭电acm的题目,也当对自己编程能力的锻炼吧. Problem Description I have a very si ...
    
			
    6. 
						
  6. vim尝试
			
    http://3502990.blog.51cto.com/3492990/985750
    
			
    7. 
						
  7. String的split(String regex, int limit)方法小结
			
    split(String regex, int limit)方法,头一个参数String regex表示字符串分割的模式,包括分隔符和正则表达式:但是第二个参数limit比较迷糊人,api中这样解释: ...
    
			
    8. 
						
  8. 设置datalist指定行的背景色
			
    前台: <div class="table-responsive" > <table class="table table-bordered table ...
    
			
    9. 
						
  9. unity编辑器拓展
			
    [ExecutelnEditMode]     在EditMode下也可以执行脚本,Unity默认情况下,脚本只有运行时被执行,加上此属性后,不运行程序也能执行.与PlayMode不同的是函数不会不停 ...
    
			
    10. 
						
  10. ListView 动态生成 Header
			
    //取得结果集 DataTable dt = ub.GetUser().Tables[0]; //清空原本的内容 listView1.Items.Clear(); //通过DataTable 得到当前 ...
    
			
    11.