django之ajax组件

时间 2020-05-01

标签 django ajax 组件栏目 Python 繁體版

原文原文链接

一什么是Ajax

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

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

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

优势：

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

需求：在企业中写增删改查通常就两类，一类是一点添加删除修改都是跳转到新的url来作(form表单)。另一类就是基于ajax来作的。jquery

　　注册一个帐户ajax

　　　　一点注册这个按钮弹出一个框让用户填写用户名、密码、选择男女、下拉框选择城市等等。数据库

　　　　(若是输入都是正确的应该增长，若是填写的不正确页面上应该进行错误提示)django

　　　　填写完全部信息一点注册，数据传送到后台作添加，添加成功以后页面刷新。json

　　注意：bootstrap

　　　　若是是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>

login1.html

from django.shortcuts import render

# Create your views here.

def login1(request):
    if request.method == 'GET':
        return render(request,'login1.html')

views视图函数

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),
]

urls路由

基于jquery的Ajax实现登陆功能:

Ajax的序列化与反序列化

ajax提交json格式数据：

在前端页面里将字典转换成字典json字符串：相似于Python中的json.dumps()

$.ajax({
    url: '/add_book/',
    type: 'post',
    data: JSON.stringify(要传递的字典格式数据),
    success: function (data) {

    })

JSON.stringify()方法

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);
        }
    })

JSON.parse()方法

111

django之ajax组件

一 什么是Ajax

优势：

二 基于jquery的Ajax实现

基于jquery的Ajax实现登陆功能:

Ajax的序列化与反序列化

一什么是Ajax

二基于jquery的Ajax实现