一 什么是Ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程)。
优点：
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
需求：在企业中写增删改查一般就两类，一类是一点添加删除修改都是跳转到新的url来做(form表单)。另外一类就是基于ajax来做的。
注册一个账户
一点注册这个按钮弹出一个框让用户填写用户名、密码、选择男女、下拉框选择城市等等。
(如果输入都是正确的应该增加，如果填写的不正确页面上应该进行错误提示)
填写完所有信息一点注册，数据传送到后台做添加，添加成功之后页面刷新。
注意：
如果是form表单，一点提交，页面会直接刷新，看不到弹出框的错误提示信息。
Ajax向后台提交数据，悄悄的向某个url发送请求。
怎么用jquery级别的ajax：
第一步下载jquery并引入：
第二步指定url、指定发送形式、指定发送的数据
$.ajax({ url:'', //写url地址 type:'', //写GET或POST data:{}, //写向后台要提交的数据，格式是字典形式
success:function(data){
//回调函数，当向后台发了一个请求，后台处理完并且返回了一段结果的时候这个函数自动执行。
//data,后台返回的数据
}
})
如果是GET请求ajax会自动把数据内容追加到url路径上发过去
如果是POST请求ajax会自动把数据内容放到请求体里面发过去
ajax向后台提交数据的语法就是这么写的，我觉得难点在于：
- 怎么获取元素里的值
- 找到提交的标签绑定点击事件
- 找到有数据的标签，找值是.val(),找属性值是.attr()。
- 如果是男女的选择框需要做特殊处理--prop设置属性针对的是checked、selected、disabled这样的属性。
- 后台获取前端传的值，然后返回什么样的数据给前端
- 后台获取数据存到数据库，数据库有什么字段就写什么。
- 存的过程可能出错，我们需要捕获异常，给前端返回错误提示，提示信息用字典，json格式
- 前端获取后台传的值怎么去用
- 根据返回的状态码做不同的操作
- 如果后台存入数据成功，前端需要对数据进行操作
- 如果失败要一是错误信息
- 如果后台存入数据成功，前端需要对数据进行操作
- 根据返回的状态码做不同的操作
例子中用了
- 前端框架bootstrap（提供了现成的样式+效果）。
- FontAwesome
def add_book(request): res = {'status': '200', 'msg': None} return JsonResponse(res)
在前端页面里将json字符串转换成字典的方法： 类似于Python中的json.loads()
dic = JSON.parse(data); #data是json格式的字符串
在前端页面里将字典转换成字典json字符串的方法： 类似于Python中的json.dumps()
dic = {'k1':'v1','k2':'v2'}
str = JSON.stringify(dic)
模态对话框适合ajax。
二 基于jquery的Ajax实现
在页面上搞点事情，往后台发送数据。
因为ajax是jquery封装了一下。所以在html文件里需要导入它。
后台返回的不可能是个页面，
我们先看form表单提交数据：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>form表单提交数据</title> </head> <body> <form action="/login1/" method="post"> {% csrf_token %} <p>用户名：<input type="text" name="name"></p> <p>密码：<input type="password" name="pwd"></p> <input type="submit" value="提交"> </form> </body> </html>
from django.shortcuts import render # Create your views here. def login1(request): if request.method == 'GET': return render(request,'login1.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'^login/', views.login), ]
基于jquery的Ajax实现登录功能:
Ajax的序列化与反序列化
ajax提交json格式数据：
在前端页面里将字典转换成字典json字符串： 类似于Python中的json.dumps()
$.ajax({ url: '/add_book/', type: 'post', data: JSON.stringify(要传递的字典格式数据), success: function (data) { })
ajax反序列化
在前端页面里将json字符串转换成字典的方法： 类似于Python中的json.loads()
$.ajax({ url: '/add_book/', type: 'post', data: {}, dataType:'JSON', #会将后台传的json字符串转换成字典 success: function (data) { } })
$.ajax({ url: '/add_book/', type: 'post', data: {}, success: function (data) { //将后台传的json字符串转换成字典 var dic = JSON.parse(data); } })
111