Django（八）：Ajax的简单使用

一、为什么使用AJax 1.AJAX 简介

• AJAX （全称：Asynchronous JavaScript and XML）异步的 JavaScript 和 XML
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

2.AJAX的特点

普通请求：会携带整个页面提交，最明显的特征刷新页面，页面重置。好多的静态资源，页面不需要刷新，并且刷新的时候可能阻塞整个服务。缺点：

• 用户体验特别差
• 请求内容和响应内容冗余

基于上面的问题，ajax出现了 ：

• ajax能够发送局部的请求，页面整体不刷新，只是局部刷新
• ajax可以发送一个异步请求，请求的过程中不会阻塞整个服务

3.AJAX的结构

$.ajax(  
        {  //  ajax请求的数据需要放在一个对象中
                    url:'请求的路径',         
                    type:'请求的类型，一般是get和post',         
                    data:'请求数据  post请求时候去填写',         
                    success:function (data) {     
                        //  请求成功之后执行的方法， 一般返回json数据
                    },
                    error:function (error) {       
                        //  请求报错之后执行
                    }
                }
            )

二、使用Ajax完成一个get请求

这里是使用Python的Django框架进行演示。

1.在html页面导入jq包

DOCTYPE html>


    
    ajax的get请求
    

2. ajax完成一个get请求，需要后端有两个函数

• 一个视图函数提供页面

• 第二个视图 负责接收ajax请求，处理ajax请求，返回JsonResponse对象

3.使用get请求判断和数据库中的账户密码是否相同 html

DOCTYPE html>


    
    ajax的get请求
    



    姓名：
    密码：
    



    $('#button').click(
        function () {
            username=$('#username').val();//获取姓名值
            password=$('#password').val();//获取密码值
            url='/ajax_get_data/?username='+username+'&password='+password;//拼接get路由
            $.ajax(
                {
                    url:url,
                    type:'get',
                    data:'',//请求数据,get类型不填写
                    success:function (data) { console.log(data);},
                    error:function (error) { }
                }
            )
        }
    ) 

view.py：

from django.http import JsonResponse

def ajax_get(request):
    return render(request,"ajax_get.html")
    
def ajax_get_data(request):
    result = {"code":10000,"content":""}

    username = request.GET.get("username")
    password = request.GET.get("password")
    
    if username=="admin" and password=="xxx":
        result['code'] = 10000
        result['content'] = "请求可为空"
    else:
        result['code'] = 10002
        result['content'] = "用户不存在或者密码不正确"
        
    ##  返回一个json对象
    return JsonResponse(result)

添加路由后，访问页面即可实现

三、使用Ajax完成一个post请求

ajax使用post请求跟get请求一样，也需要两个视图，注意post请求，在Django中会面临CSRF的问题

不同的地方：

• get请求拼接路径和参数 /index/?name=zhangsan&age=19
  • get请求 中的 type = get
• post需要构造数据字典
  • type = post
  • 构造字典的时候需要添加 csrf解决跨域问题 'csrfmiddenwaretoken':{{ csrf_token }}

html页面

    {% csrf_token %}
    名字：
    密码：

    





    $("#check_value").click(
        function () {
            // 获取值
            username = $("#username").val();
            password = $("#password").val();  
            $.ajax(
                {
                    url:"/ajax_post_data/",
                    type:"post",
                    data:{
                          "username":username,
                          "password":password,
                           "csrfmiddlewaretoken":"{{ csrf_token }}"
                          }，
                    success:function (data) {
                        console.log(data);
                    },
                    error:function (error) {
                        console.log(error);
                    }
                }
            )
        }
    )

视图： 配置路由，验证即可。

四、注意

另外除了使用id的方式，也可以将触发事件写成，onclick调用函数触发。

var re_screenshot = function (media_id) {
        console.log(media_id);
        $.ajax(
            {
                url: '/push_koc_screenshot?media_id=' + media_id,//发起一个ajax请求
                type: 'get',//请求类型
                data: '',//请求数据,get类型不填写
                success: function (data) {//拿到数据，data接口返回的数据
                    console.log(data);
                    console.log(data.code);
                    alert('重新截图成功！十分钟后刷新页面查看！')
                },
                error: function (error) {
                }
            }
        )
    }