AJAX简介

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

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

场景：

优点:

1.  不用刷新整个页面
2.  异步提交请求

在学习ajax之前先回顾一下基本的请求形式

     客户端浏览器给服务器发请求的形式:
         
        1 地址栏输入url 回车  默认是get请求方式
        2 form表单,用户点击submit按钮  
                    --- get
                    --- post
        3 超链接标签(a标签)    默认是get请求方式
        
        4 Ajax请求
               ---get
               ---post
               
            (1) 异步
            (2) 局部刷新

基于jquery实现ajax

　　在项目中存在index.html网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is index</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>  #基于jquery要先引入jquery
</head>
<body>
{% csrf_token %}                                                           #中间组件csrf的影响,必须有csrf的认证
<h3>This is index</h3>
<button class="ajax">ajax</button>
<p class="con"></p>

<hr>
<button class="ajax2">携参ajax</button>

<hr>
<input type="text" class="num1"> + <input type="text" class="num2"> = <input type="text" class="result"><input
        type="button" class="cal" value="计算" >
<script>
    //ajax的简单使用
    $('.ajax').click(function () {                          #给.ajax类属性的标签绑定时间
        //发送ajax请求　　　　　　　　　　　　　　　　　　　　　　　#发送ajax请求
        $.ajax({
            url:'/ajax_handle/',                            #ajax必须有的几对参数1.url 提交的路径
            type:'get',
            success:function(res){　　　　　　　　　　　　　　　　　　　　　　　　　　2. type:提交的方法 post/get
                console.log(res);　　　　　　　　　　　　　　　　　　　　　　　　　　　3.success:会执行一个函数,函数有一个参数,是来自ajax提交后的返回值
                $('.con').html(res);　　　　　　　　　　　　　　　　　　　　　　　　　　#可以理解success是一个回调函数
            }
        })
    });


    //携参的ajax的使用
    $('.ajax2').click(function(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　#一样的额绑定事件,,发送请求,
        //发送ajax请求　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　#携参要带参数就是数据
        $.ajax({　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　#data:{data里面一定要带钥匙csrf}
            url:'/ajax_handle2/',
            type:'post',
            data:{
                a:1,
                b:2,
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
            },
            success:function (ret) {
                    console.log(ret)
                }
        })
    });



    //携参实例(简单的计算器)
    $('.cal').click(function(){
        let num1=$('.num1').val();
        let num2=$('.num2').val();
        console.log(num1,num2);
        //发送ajax请求
        $.ajax({
            url:'/cal/',
            type:'post',
            data:{
                n1:num1,
                n2:num2,
                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
            },
            success:function(res){
                console.log(res);
                console.log(typeof res);
                let response=JSON.parse(res);
                if (response.code == "1000"){
                    $('.result').val(response.data)
                }
                else{
                    alert(response.msg)
                }
            }
        })
    })

　　视图函数

from django.shortcuts import render,HttpResponse
import json
# Create your views here.

def index(request):


    return render(request,'index.html')

def ajax_handle(request):

    return HttpResponse('你好')

def ajax_handle2(request):

    return HttpResponse('我擦嘞')

def cal(request):
    response={"code":1000,"data":None,"msg":None}
    try:
        print(request.POST),
        print(request.GET),
        n1 = request.POST.get("n1")
        n2 = request.POST.get("n2")
        ret = str(int(n1) + int(n2)) #接收的是字符串,转换成数字计算完成后再转化成字符串
        response["data"]=ret
    except Exception as e :
        response["code"]=1001
        response['msg']=str(e)
    # HttpResponse只能接收字符串,用json序列化
    return HttpResponse(json.dumps(response))

　　这边需要用到数据转换的语法:

python:
　　json.dumps()
　　json.loads

在JavaScript中
　　Json.stringfy
　　Json.pasrse

　　关于ajax的总结

　　客户端浏览器通过执行一段Js代码向服务器发送一段ajax请求,服务器路由对应的视图函数返回一段Json字符串(建议用json)作为响应,
浏览器接收响应后会触发该ajax请求的回调函数success,参数为响应字符串,success内通过Dom操作将结果反应到页面上,实现局部刷新,
不像之前的请求会将响应覆盖整个页面
　　
　　ajax不要返回render,redirect这些响应,就只返回HttpResponse形式的Json字符串(要记得转换数据为Json)

django组件之ajax

AJAX简介

基于jquery实现ajax

猜你喜欢