django之ajax组件

一 什么是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>
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

posted @ 2020-04-20 22:53  张仁国  阅读(175)  评论(0)  编辑  收藏  举报
目录代码