Ajax | 简介+基础语法

狼_先生
126 阅读2分钟

Ajax简介

Ajax(Asynchronous Javascript And XML)翻译成中文就是“异步的JavaScript和XML”。即使用JavaScript语言与服务器进行一步交互，传输的数据为XML。（当然，传输的数据不只是XML）

Ajax不是新的编程语言，而是一种使用现有标准的新方法。

Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应的过程）

Ajax不需要任何浏览器插件。但需要用户允许JavaScript在浏览器上执行。

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

Ajax语法

views.py

def ajaxDEMO(request):  
if request.method == "POST":  
print(request.POST)  
i1 = request.POST.get('i1')  
i2 = request.POST.get('i2')  
# 先转成整形，再做添加  
  
i3 = int(i1) + int(i2)  
print(i3)  
return HttpResponse(i3)  
  
return render(request, 'ajaxDEMO.html')

html文件

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>DEMO</title>  
  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet">  
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>  
  
</head>  
<body>  
  
<input type="text" id="d1"> +  
<input type="text" id="d2"> =  
<input type="text" id="d3">  
  
<p>  
<button id="btn">点击</button>  
</p>  
  
  
<script>  
//先给按钮绑定一个点击按键  
$('#btn').click(function (){  
//朝后端发送Ajax请求  
$.ajax({  
//1. 指定朝哪个后端发送Ajax请求  
url:'', //不写的话，就是默认朝当前地址提交  
//2. 请求方式  
type:'post', //不写的话，默认就是GET请求，都是小写  
//3. 数据  
{#data:{'username':'JJ', 'password':123},#}  
data:{'i1':$('#d1').val(), 'i2':$('#d2').val()},  
//4. 回调函数/异步回调机制  
success:function (args){  
//alert(args)// 当后端给你返回结果的时候，自动触发，args接收后端返回的结果  
// 这里应该通过DOM操作，动态渲染到第三个input框里面  
$('#d3').val(args)  
}  
})  
})  
</script>  
</body>  
</html>

前后端传输数据的编码格式（content type）

我们主要研究POST请求数据的编码格式

GET请求数据就是直接放在URL后面的 url?username=jason&password=123

前后端传输数据编码格式分别有urlencode|formdata|json

研究form表单

默认的数据编码格式是urlencode

数据格式：username=jason&password=123

Django后端针对符合urlencode编码格式的数据都会自动帮你解析封装到request.POST中

如果把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中，而将文件解析到request.FILES中

form表单是没有办法发送json数据的。

研究Ajax

默认的数据编码格式也是urlencode

数据格式：username=jason&password=123

Django后端针对符合urlencode编码格式的数据都会自动帮你解析封装到request.POST中

Ajax发送json格式数据

前后端传输数据的时候，一定要保证编码格式跟数据真正的格式是一致的，不要骗人家。

$('#b1').click(function(){  
    $.ajax({  
    url:'',  
    type:'post',  
    data:JSON.stringify({'username':'JJ', 'password':123}),  
    contentType:'application/json', //指定编码格式  
    success:function (){  
    
        }  
    })  
})

Ajax发送文件

<body>  
  
<p>username:<input type="text" id="i1"></p>  
<p>password:<input type="text" id="i2"></p>  
<p><input type="file" id="f1"></p>  
<button class="btn btn-success" id="b1">click</button>  
  
<script>  
  
// 点击按钮，朝后端发送普通键值对和文件数据  

$('#b1').on('click', function (){  

// 1. 需要先利用FormData内置对象  
    let formDataObj = new FormData();  
    
// 2. 添加普通键值对  
    formDataObj.append('username', $('#i1').val())  
    formDataObj.append('username', $('#i2').val())  
    
// 3. 添加文件对象  
    formDataObj.append('myfile', $('#f1')[0].files[0])  
    
// 4. 将对象基于Ajax发送给后端  
    $.ajax({  
        url:'',  
        type:'post',  
        data:formDataObj, // 直接将对象放在data后面即可  
  
// Ajax发送这个文件必须指定两个参数  
        contentType:false, // 不需要使用任何编码，Django后端能够自动识别formData对象  
        processData: false, // 告诉你的浏览器不要对你的数据进行任何处理  
  
        success:function (args){  
  
}  
})  
  
})  
  
</script>  
</body>

views.py

def ajaxDEMO(request):  
  
if request.is_ajax():  
if request.method == 'POST':  
print(request.POST)  
print(request.FILES)  
return render(request, 'ajaxDEMO.html')

Django自带的序列化组件（DRF做铺垫）

如果你发现你可以直接使用MySQL但是无法使用sqlite3，不用慌张不要恐惧，你只需要按照之前MySQL的操作将sqlite3的驱动重新装一下就可以

import json  
from django.http import JsonResponse  
def ajaxDEMO(request):  
    demo_list = models.Books.objects.all()  
    lst = []  
    for foo in demo_list:  
        temp = {  
        'pk':foo.pk,  
        'title':foo.title,  
        'price':foo.price,  
        # 'genre':foo.genre,  
        # 'author':foo.author,  
        # 'publish':foo.publish  
        }  
    lst.append(temp)  
return JsonResponse(lst, safe=False)

from django.core import serializers

import json  
from django.http import JsonResponse  
from django.core import serializers  
def ajaxDEMO(request):   
    demo_list = models.Books.objects.all()  
    res = serializers.serialize('json', demo_list) # 格式 + 数据  
    '''会自动帮你把数据变成JSON格式的字符串，并且内部非常全面'''  
    return HttpResponse(res)

返回出来的结果

[  
{"model": "app01.books",  
"pk": 7,  
"fields": {"title": "狼哥为什么如此优秀", "price": "19.99", "genre": "都市", "publish": 7, "author": [1]}},  
  
{"model": "app01.books",  
"pk": 13,  
"fields": {"title": "狼哥为什么这么优秀", "price": "888.00", "genre": "都市", "publish": 7, "author": [2]}},  
  
{"model": "app01.books",  
"pk": 14,  
"fields": {"title": "狼哥的一生", "price": "18.88", "genre": "都市", "publish": 8, "author": [3]}},  
  
{"model": "app01.books",  
"pk": 15,  
"fields": {"title": "什么叫做白日梦", "price": "11.00", "genre": "都市", "publish": 7, "author": [1]}},  
  
{"model": "app01.books",  
"pk": 16,  
"fields": {"title": "恋爱手册", "price": "35.00", "genre": "言情", "publish": 8, "author": [3]}}  
]

所以写接口就是利用序列化组件渲染数据然后写一个文档接口

avatar
文章
阅读
粉丝