ajax django计算器,django与Ajax

目录

Ajax简介

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

ajax是异步提交的

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

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

举个实例

Title

+ =

计算

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

$.ajax({

url:'', // 数据提交的地址， 不写就是向当前页面提交，也可以写后缀，也可以写全称，与form表单参数action一样

type: 'post', // 提交方式，不写默认是get请求

data: {'t1': $('#t1').val(), 't2':$('#t2').val()}, // 提交的数据

success: function (data) { // 形参data就是异步提交之后后端返回的结果

$('#t3').val(data)

}

})

})

数据传输编码格式的解析

前后端交互式一个数据编码格式，针对不同的数据，后端会进行不同的处理

三种格式：

urlencoded

formdata

application/json

form表单发送三种数据格式的情况

form表单post请求默认的编码格式是urlencoded

在浏览器-->检查-->network可以看到，我们form表单在提交数据的时候，有如下信息：

Request Headers： # 请求头

Content-Type:application/x-www-form-urlencoded; charset=UTF-8 # 数据编码格式-urlencoded

Form Data：# 携带的数据

d1=23&d2=23

在我们后端django中针对urlencoded数据，会自动解析并封装到request.POST方法中

form表单发送文件

Request Headers： # 请求头

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ # 数据编码格式，-form-data

Form Data：#针对form-data格式的数据，在浏览器是无法查看的

发送到后端django，文件对象会自动解析到 request.POST 和 request.FILES 中，前者记录文件名，后者记录对象。

form表单无法发送json格式的数据，要想实现，只能借助ajax

ajax发送数据的编码格式

默认的编码格式也是urlencoded

ajax传输json格式数据

有个参数，contentType，不写默认是urlencoded，

在view.py中

import json

def home(request):

if request.method == "POST":

print(request.body)

json_bytes = request.body

print(json.loads(json_bytes), type(json.loads(json_bytes)))

# 反序列化为python字典格式

return render(request, 'form_test.html')

# 结果：

'''

b'{"d1":"cwz","d2":"123"}'

{'d1': 'cwz', 'd2': '123'}

'''

form_test.html文件：

Title

username:

password:

点我发送json格式

$('#d3').click(function () {

$.ajax({

url:'',

type:'post',

contentType:'application/json', //需要指定编码格式为json

data:JSON.stringify({'d1':$('#d1').val(),'d2':$('#d2').val()}), // 需要前端发送JSON字符串，JSON。stringify序列化即可。

success:function (data) {

alert(123)

}

})

})

ajax传json格式数据特点：

django后端针对json格式的数据 不会自动帮你解析 会直接原封不动的给你放到request.body中 你可以手动处理 获取数据。拿到request.body是一个bytes类型数据

Ajax传输文件数据

需要借助内置对象，该对象既可以携带文件数据，同样也支持普通的键值对

注意几个参数：

data：formdata对象

contentType：false

processData：false

Title

username:

password:

myfile:

点我发送文件

$('#d2').click(function () {

// 先生成一个内置对象

var MyFormData = new FormData();

// 先添加普通的键值

MyFormData.append('username', 'cwz');

MyFormData.append('password', '123');

//添加文件数据

MyFormData.append('myfile', $('#d1')[0].files[0]); // 将jquery对象转换成原生的js对象,利用原生js对象的方法 直接获取文件内容

$.ajax({

url: '',

type: 'post',

data: MyFormData,

contentType: false, //不用任何编码,因为formData对象自带编码 django能够识别该对象

processData: false, //告诉浏览器不要处理我的数据 直接发就行

success: function (data) {

}

})

})

django内置序列化模块

序列化的目的就是 将数据整合成一个大字典

导入这个模块：from django.core import serializers

比自己用json转方便多了

from app01 import models

from django.core import serializers

def yyy(request):

author_queryset = models.Author.objects.all()

res = serializers.serialize('json', author_queryset)

return HttpResponse(res)

效果：

[{

"model": "app01.author",

"pk": 1,

"fields": {

"name": "\u90b6\u98ce",

"email": "123@qq.com",

"author_detail": 1

}

}, {

"model": "app01.author",

"pk": 2,

"fields": {

"name": "\u5f0f\u5fae",

"email": "111@sin.com",

"author_detail": 2

}

}, {

"model": "app01.author",

"pk": 3,

"fields": {

"name": "\u65e0\u540d",

"email": "100@qq.com",

"author_detail": 3

}

}]