Django与Ajax

Ajax是什么

Ajax是一种用于创建交互式Web应用程序的技术。它是Asynchronous JavaScript and XML的缩写，意思是使用JavaScript和XML进行异步数据交换。通过Ajax技术，可以在不刷新整个页面的情况下更新页面的某个部分或者获取服务器数据，并能够动态地将这些数据加入到页面中。Ajax被广泛应用于许多网站和Web应用程序中，已经成为Web开发的重要一环。

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

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

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

优点

• AJAX使用Javascript技术向服务器发送异步请求
• AJAX无须刷新整个页面

基于jquery的Ajax实现 

send_Ajax

Ajax—->服务器——>Ajax执行流程图

 Ajax案例

通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面

views模块

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
import json

# Create your views here.

def ab_ajax(request):
    # if request.is_ajax():
    if request.method == "POST":
        print(request.POST)
        d1 = request.POST.get('inp1')  # str
        d2 = request.POST.get('inp2')  # str
        d3=int(d1)+int(d2)
        print(d3)
       

        json.dumps(d3)
        return HttpResponse(json.dumps(d3))#序列化

        #想返回一个字典
        #user_dict={"username":"kevin","password":123}#第二部分
        #return HttpResponse(json.dumps(user_dict))#第二部分
        #return JsonResponse(user_dict)# 后端用JsonResponse不用反序列化#第二部分

    return render(request, 'ab_ajax.html')

templates\ab_ajax.html模块

    
    
    
    
    


{#ajax的三种序列化情况#}




提交

Ajax提交json格式的数据

浏览器请求头为：

Content-Type:

multipart/form-data; boundary=—-WebKitFormBoundaryA5O53SvUXJaF11O2

views模块

from django.shortcuts import render

# Create your views here.
import json
def index(request):

# # request.POST只能接收post请求的符合urlencoded编码格式的数据 {}

    if request.method =='POST':
       print(request.POST)#  
       print(request.body)#  b'{"a":1,"b":2}'
       json_bytes=request.body#二进制格式，接收浏览器发过来的纯原生数据，需要自己转换格式

        #第一种方法
       json_str=json_bytes.decode('utf-8') #decode 转码
       print(json_str)#{"a":1,"b":2}json格式

       json_dict=json.loads(json_str)
       print(json_dict)#{'a': 1, 'b': 2}字典形式

        #第二种方法(有bug)
       json_dict=json.loads(json_bytes)
       print((json_dict,type(json_dict)))


    return render(request,'index.html')

templates\index.html

    
    
    
    
    


提交

 

Ajax提交文件数据

templates\index.html

views

from django.shortcuts import render

# Create your views here.
import json
def index(request):

    if request.method =='POST':
       print(request.POST)#  
      
     
       print(request.FILES)
       myfile=request.FILES.get('myfile')




    return render(request,'index.html')