本文深入讲解Ajax的概念、特点及其实现方式，包括基于jQuery的Ajax数据传输，文件上传的多种方法，以及Ajax与JSON格式数据的编码和解码。通过实例演示如何从前端发送和接收数据，以及如何处理JSON格式的数据。
目录
2-1 JavaScript - Location 对象 - W3C学习API
三、实例 - 基于ajax实现前端传值，后台计算后值返回前端页面
4-2 - 基于Ajax的文件上传 - 使用formadata对象包装数据传输
-1 application/x-www-form-urlencoded -- 默认
五、Ajax 和 Json 格式数据 - 前端以及后端的json数据解码和编码
5-1 JavaScript - Json - js - json学习
- JSON.parse() - 将一个 JSON 字符串转换为对象。
- JSON.stringify() - 将 JavaScript 值转换为 JSON 字符串。
一、Ajax 概念总结
简介：使用Javascript语言与服务器进行异步交互，传输的数据为XML（传输的数据现在更多使用json数据）。即，用于前后端交互。
1-1 前后端数据交互的方式：
在url输入地址（get）
form表单提交数据（get、post）
ajax异步传输数据
1-2 Ajax的特点：
异步交互
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
局部刷新 -- 局部的DOM操作，即页面不刷新
1-3 JQ - Ajax内属性和方法
二、基于jquery实现前端ajax传输数据
总结：
- 使用 jquery $.ajax({}) 用于响应某一个事件
- data 获取页面内属性使用 jquery 格式的 css 选择器语法；获取指定对象的输入值，用 val() 函数获取
- data获取的值可以使用success回调函数取的视图函数传回的数据，val(data)可以进行赋值操作
- 可使用 js 语法内的 Location 对象进行重定向等 url 操作
- 视图函数内返回给前端ajax的数据不只能是字符串形式（str、json），可能传输对象、字典等
// 导入基于jquery的静态文件 <script src="/static/jquery-3.3.1.js"> </script> <body> <p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p> <button class="send_Ajax">send_Ajax</button> </body> <script> $(".send_Ajax").click(function(){ $.ajax({ // 接受数据并响应的路径 - 同form表单内的action，到路由层进行响应视图函数 url:"/handle_Ajax/", // 传输方式（post、get） type:"post", // 传输数据 data:{ username:"Yuan", password:123， 'add1':$("#add1").val(), 'add2':$("#add2").val() }, //成功传输的回调函数，即成功传输后执行 success:function(data){ $("#sum").val(data) console.log(data) // js的重定向 - Location 对象 location.href='http://www.baidu.com' }, //错误传输的回调函数，即错误传输后执行 error: function (jqXHR, textStatus, err) { console.log(arguments); }, complete: function (jqXHR, textStatus) { console.log(textStatus); }, statusCode: { '403': function (jqXHR, textStatus, err) { console.log(arguments); }, '400': function (jqXHR, textStatus, err) { console.log(arguments); } } }) }) </script>2-1 JavaScript - Location 对象 - W3C学习API
简介：Location 对象包含有关当前 URL 的信息，Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
-1 对象属性
属性 描述 hash 设置或返回从井号 (#) 开始的 URL（锚）。 host 设置或返回主机名和当前 URL 的端口号。 hostname 设置或返回当前 URL 的主机名。 href 设置或返回完整的 URL。 pathname 设置或返回当前 URL 的路径部分。 port 设置或返回当前 URL 的端口号。 protocol 设置或返回当前 URL 的协议。 search 设置或返回从问号 (?) 开始的 URL（查询部分）。 - 2 对象方法
属性 描述 assign() 加载新的文档。 reload() 重新加载当前文档。 replace() 用新的文档替换当前文档。
三、实例 - 基于ajax实现前端传值，后台计算后值返回前端页面
注意：
- 可以使用 httpresponse 进行传输数据，前端可以进行接收处理赋值
- 前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jquery-3.3.1.js"> </script> <title>Title</title> </head> <body> <p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p> <button class="btn">点我</button> </body> <script> $(".btn").click(function () { $.ajax({ url:'add', type:'post', //$("#add1").val() 取到id为add1这个控件的value值 data:{ 'add1':$("#add1").val(), 'add2':$("#add2").val() }, success:function (data) { {#alert(data)#} //赋值 $("#sum").val(data) {#location.href='/index/'#} } }) }) </script> </html>- 路由层
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/', views.index), url(r'^add/', views.add), ]- 视图函数
from django.shortcuts import render, HttpResponse def add(request): if request.method == 'GET': return render(request, 'add.html') add1 = request.POST.get('add1') add2 = request.POST.get('add2') print(type(add2)) sum = int(add1) + int(add2) return HttpResponse(str(sum))
四、实例 - 文件上传
4-1 - 基于Form表单的文件上传
4-2 - 基于Ajax的文件上传 - 使用formadata对象包装数据传输
-1 前端
总结：
- form表单结构内的数据可以new一个 formdata对象进行添加属性和编码格式转换操作
- ajax体内 - processData ： 不欲处理数据，即相当于(name=a&age=18)
- ajax体内 -contentType： 不自主处理数据编码格式，即不处理Content-Type请求头，使用fomadata对象处理
- 默认 urlencoded 编码和 formdata 传输给后台的数据，后台以 POST 进行接受处理
- 上传到文件保存在相对路径下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jquery-3.3.1.js"></script> <title>Title</title> </head> <body> <form action="/files/" method="post" enctype="multipart/form-data"> <p>用户名:<input type="text" name="name" id="name"></p> <p><input type="file" name="myfile" id="myfile"></p> <input type="submit" value="提交"> </form> <button id="btn">ajax提交文件</button> </body> <script> $("#btn").click(function () { //上传文件,必须用FormData var formdata=new FormData(); formdata.append('name',$("#name").val()); //取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来 formdata.append('myfile',$("#myfile")[0].files[0]); $.ajax({ url:'/files_ajax/', type:'post', // 不预处理数据 默认处理数据：name=lqz&age=18 processData:false, // 指定往后台传数据的编码格式(urlencoded,formdata,json) // 现在用 formdata 对象处理了,就不需要指定编码格式,不需要编码 contentType:false, data:formdata, success:function (data) { alert(data) } }) }) </script> </html>-2 视图层
from django.shortcuts import render, HttpResponse def files_ajax(request): if request.method == 'GET': return render(request, 'add_files.html') # 提交文件从,request.FILES中取,提交的数据,从request.POST中取 name = request.POST.get('name') print(name) dic_files = request.FILES myfile = dic_files.get('myfile') with open(myfile.name, 'wb') as f: # 循环上传过来的文件 for line in myfile: # 往空文件中写 f.write(line) return HttpResponse('ok')
4-3 请求头 ContentType
-1 application/x-www-form-urlencoded -- 默认
''' 这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单。 如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。 ''' # 请求类似于下面这样（无关的请求头在本文中都省略掉了）： POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded;charset=utf-8 user=lqz&age=22-2 multipart/form-data
''' 这又是一个常见的 POST 数据提交的方式。 我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。 ''' POST http://www.example.com HTTP/1.1 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA # ------WebKitFormBoundaryrGKCBY7qhFd3TrwA 为数据分割线 ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="user" yuan ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="file"; filename="chrome.png" Content-Type: image/png PNG ... content of chrome.png ... ------WebKitFormBoundaryrGKCBY7qhFd3TrwA---3 application/json
application/json 这个 Content-Type 作为响应头大家肯定不陌生。 实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。 由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify. 服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。 JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。
五、Ajax 和 Json 格式数据 - 前端以及后端的json数据解码和编码
总结：
- 对象 - > json格式字符串 ：JSON.stringify（对象名） -- json.dumps(对象名)
- json格式字符串 -> 对象 : JSON.parse(json格式字符串名) -- json.loads(json格式字符串)
- 前端传后台json数据
data：json格式字符串
contentType：‘application/json’ -- 后台从body中读取数据，自动不进行处理，需要手动处理 b'传输数据'
5-1 JavaScript - Json - js - json学习
函数 描述 JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。 JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。 - JSON.parse() - 将一个 JSON 字符串转换为对象。
语法：JSON.parse(text[, reviver])
参数说明：
- text:必需， 一个有效的 JSON 字符串。
- reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
- JSON.stringify() - 将 JavaScript 值转换为 JSON 字符串。
语法：JSON.stringify(value[, replacer[, space]])
参数说明：
- value:
必需， 要转换的 JavaScript 值（通常为对象或数组）。
- replacer:
可选。用于转换结果的函数或数组。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
- space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
返回值：返回包含 JSON 文本的字符串。
5-2 前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/static/jquery-3.3.1.js"></script> <title>Title</title> </head> <body> <form> <p>用户名:<input type="text" name="name" id="name"></p> <p>密码:<input type="password" name="pwd" id="pwd"></p> <input type="submit" value="提交"> </form> <button id="btn">ajax提交json格式</button> </body> <script> $('#btn').click(function () { var post_data = {'name': $("#name").val(), 'pwd': $("#pwd").val()}; console.log(typeof post_data); // 使用JSON.stringify将post_data这个字典,转成json格式字符串 //JSON.stringify相当于python中json.dumpus(post_data)、 //pos是个字符串,json格式字符串 var pos = JSON.stringify(post_data); console.log(typeof pos); $.ajax({ url: '/json/', type: 'post', data: pos, // 指定传输的数据是json编码格式 contentType: 'application/json', // 指定接收的数据是json dataType: 'json', success: function (data) { console.log(typeof data); console.log(data.status); {#// 将返回的json格式数据转换成对象（字典）#} {#//使用 JSON.parse(data)#} {#console.log(data);#} {#var ret = JSON.parse(data);#} {#console.log(typeof ret);#} {#console.log(ret.status)#} //alert(data) } }) }) </script> </html>5-3 视图函数
from django.shortcuts import render, HttpResponse from django.http import JsonResponse def add_json(request): if request.method == 'GET': return render(request, 'json.html') print(request.POST) print(request.GET) print(request.body) import json # res是个字典 - 手动对传到后台的数据进行解json res = json.loads(request.body.decode('utf-8')) print(res) print(type(res)) dic = {'status': '100', 'msg': '登录成功'} # return HttpResponse('ok') # 返回给前台json格式 # return HttpResponse(json.dumps(dic)) return JsonResponse(dic)
扫一扫
1887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
