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. FTP批量下载数据文件
			
    包含ftp的命令脚本,建立临时文件. ::服务器连接信息 set username=root set password=root set ip=xxx.xxx.xxx.xxx set RemoteDi ...
    
			
    2. 
						
  2. js面试题知识点全解(一闭包)
			
    闭包使用场景:1.函数作为返回值,如下场景 function F1(){ var a = 100 //自由变量 //返回一个函数(函数作为返回值) return function(){ console ...
    
			
    3. 
						
  3. cocos2d-js 定时器
			
    1.scheduleUpdate 节点中有scheduleUpdate接口,通过这个接口,可以让游戏在每帧执行都执行update方法 var ScheduleUpdateLayer = cc.Laye ...
    
			
    4. 
						
  4. ubuntu16.04 安装opencv3.4
			
    1.去官网下载opencv,在本教程中选用的时opencv3.4.1,其他版本的配置方法异曲同工. 下载链接http://opencv.org/releases.html,选择sources版本 2. ...
    
			
    5. 
						
  5. 说说excel
			
    今天遇到一个实际问题. 我有一组数据: 0.0.0.1 activate.adobe.com 0.0.0.1 practivate.adobe.com 0.0.0.1 ereg.adobe.com 0 ...
    
			
    6. 
						
  6. 算法Sedgewick第四版-第1章基础-013一用stack实现自动补全表达式括号
			
    package algorithms.exercise; import algorithms.ADT.Stack; import algorithms.util.StdIn; import algor ...
    
			
    7. 
						
  7. Effective Objective-C [下]
			
    http://esoftmobile.com/2013/08/17/effective-objective-c-2/ Chapter 6: Blocks and Grand Central Dispa ...
    
			
    8. 
						
  8. ARC102E Stop. Otherwise...
			
    传送门 题目大意 现在有n个k面的骰子,问在i=2~2*k的情况下,任意两个骰子向上那一面的和不等于i的方案数是多少. 分析 这道题具体做法见这个博客. 至于k2的值为啥是那个自己画画图就明白了. 代 ...
    
			
    9. 
						
  9. 关于集合的小demo
			
    /*1.分析以下需求,并用代码实现: (1)有如下代码: (2)定义方法统计集合中指定元素出现的次数,如"e" 3,"f" 2,"g" 4* ...
    
			
    10. 
						
  10. WebGoat系列实验Access Control Flaws
			
    WebGoat系列实验Access Control Flaws Using an Access Control Matrix 在基于角色的访问控制策略中,每个角色都代表了一个访问权限的集合.一个用户可 ...
    
			
    11.