第九篇 AJAX - 爱码网

阅读目录(Content)

概述
AJAX常见应用情景
- AJAX的优缺点
jQuery实现的AJAX
- $.ajax参数
AJAX请求如何设置csrf_token
序列化

Django内置的serializers

补充一个SweetAlert插件示例

概述

对于web应用程序：用户浏览器发送的请求，服务器接收并处理请求，然后返回结果，往往返回就是字符串（HTML），浏览器将字符串（HTML）渲染并显示浏览器上。

1.传统的web应用

一个简单操作需要重新加载全局数据

2.AJAX

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

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

异步的JavaScript：使用【JavaScript语言】以及相关【浏览器提供类库】的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】。 PS：以上请求和响应的整个过程是【偷偷】进行的，页面上无任何感知。
XML XML是一种标记语言，是Ajax在和后台交互时传输数据的格式之一

利用AJAX可以做： 1、注册时，输入用户名自动检测用户是否已经存在。 2、登陆时，提示用户名密码错误 3、删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。（博客园）

小练习：计算两个数的和

方式一：实现最简单的

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width ,initial-scale=1">
</head>
<body>

#----------------------------------------------------------------

<h1>计算两个数的和，测试ajax</h1>

<form action="/add/" method="get">
    <input type="text" id="i1" name="i1" value="{{ i1 }}"> +
    <input type="text" id="i2" name="i2" value="{{ i2 }}"> =
    <input type="text" id="ret" name="ret" value="{{ ret }}">
    <input id="b1" type="button" value="发送AJAX请求">
</form>
<script src="/static/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function () {
        $('#b1').on('click',function () {
            // 点击b1标签要做的事儿
            var i1 = $('#i1').val();
            var i2 = $('#i2').val();
            // 把这两个数发到后端相加
            $.ajax({
                url:'/ajax_add/',
                type:'GET',
                data:{'i1':i1, 'i2':i2},
                success:function (arg) {
                    $("#ret").val(arg)
                }
                }
            )

        })
    })
</script>
#--------------------------------------------------------------------
</body>
</html>

views.py

from django.shortcuts import render, HttpResponse, redirect

# Create your views here.


def index(request):
    return render(request, 'index.html')


def ajax_add(request):
    i1 = int(request.GET.get('i1'))
    i2 = int(request.GET.get('i2'))
    ret = i1 + i2
    return HttpResponse(ret)

第九篇 AJAX

AJAX常见应用情景

搜索引擎根据用户输入的关键字，自动提示检索关键字。

还有一个很重要的应用场景就是注册时候的用户名的查重。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

第九篇 AJAX

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

整个过程中页面没有刷新，只是局部刷新了；
在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

AJAX的优缺点

优点：

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高

jQuery实现的AJAX

<!DOCTYPE html>
<html lang="zh-CN">
<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>ajax test</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="ajaxTest">AJAX 测试</button>
<script>
  $("#ajaxTest").click(function () {
    $.ajax({
      url: "/text_ajax/",
      type: "POST",
      data: {username: "Q1mi", password: 123456},
      success: function (data) {
        alert(data)
      }
    })
  })
</script>
</body>
</html>

ajax test.html