zoukankan      html  css  js  c++  java
  • Django学习系列之结合ajax

    AJAX简介

    什么是AJAX

    • AJAX = 异步JavaScript 和 XML(Asynchronous JavaScript and XML)
    • 通过在后台于服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重载整个页面的情况下,对网页的某部分进行更新

    AJAX参数

    url:提交表单内容到views里的某个函数

    type:提交方式(POST或GET)

    data:提交到后台的数据,将自动转换成字符串格式

    dataType:指定数据处理方式(XML,HTML,JSON,JSONP,Scrit,Text)

    回调函数(callback):处理$.ajax()得到的数据

    • beforesend:在发送请求之前调用,并且转入一个XMLHttpRequest作为参数
    • error:在请求出错时调用.传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
    • dataFilter:在请求成功之后调用.传入返回的数据以及dataType参数的值.并且必须返回新的数据(可能是处理过的)传递给success回调函数
    • success:当请求之后调用,传入返回后的数据,以及包含成功代码的字符串
    • complate:当请求成功之后调用,无论成功或失败.传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串

    一个简单的ajax示例

    定义urls.py

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

    定义views.py

    from django.shortcuts import render,HttpResponse
    import json
    # Create your views here.
    
    
    def login(request):                     #通过request参数接收前端ajax传过来的数据(格式是:{"user": "111","pwd":"111"})
        if request.method == 'POST':
            ret = {'status':False}
            user = request.POST.get('user',None)  
            pwd = request.POST.get('pwd',None)
            if user == '111' and pwd == '222':
                ret['status'] =True
                return HttpResponse(json.dumps(ret),content_type="application/json")    #这里是后端处理数据,如果前段输入正确就把status置为true
            else:
                 ret['status'] = False
                 return HttpResponse(json.dumps(ret),content_type="application/json")
        return render(request,'login.html')

    定义login.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
      <form id="jsStayForm"> <div> <input type="text" name="user"/> </div> <div> <input type="password" name="pwd"/> </div> <input type="button" value="提交" onclick="SubmitForm()"/>
    {% csrf_token %}
      </form>

    <script src="/static/jquery.min.js"></script> <script> function SubmitForm() { $.ajax({ url: "{% 'url' 'add_ask' %}", type: 'POST', data: $('#jsStayForm').serialize() #自动获取id为jsStayForm表单的内容,然后序列化成json格式,比如{"user": "111","pwd":"111"},提交到后端 dataType: 'json', success: function (callback) { #success函数是后端处理完数据之后,return回来一个http响应,callback是形参,接收后端传回来的数据,这里就是return HttpResponse(json.dumps(ret))之后就执行success部分的函数, if (callback['status']) { console.log('登录成功') location.href = "http://www.baidu.com"; } else { alert('用户名或密码错误') } } }) } </script>

    处理流程

    1. 当用户点击提交按钮之后,触发JavaScript的SubmitForm函数
    2. SubmitForm函数获取用户在input的标签输入的值,并组合成一个字典,例如:{"user":1111,"pwd":222}
    3. ajax把input_dict字典传到后端views中的login函数
    4. views中的login函数通过request这个形参接收ajax传过来的input_dict字段
    5. login函数进行判断,如果判断输入正确就把ret字典的status置为true("status":true),然后return给ajax,否则置为FALSE({"status":false}),然后return 给ajax
    6. ajax如果发现有状态吗为200的返回就执行success函数
    7. success函数通过callback这个形参接收后端给传过来的ret字典

    ajax设置request对象header

    背景:要给后端传数据,但不是把数据写在form表单里,是直接通过ajax提交数据,所以要在提交数据前设置request的header,加上csrf_token

    ajax代码

    function add_fav(current_elem, fav_id, fav_type){
        $.ajax({
            cache: false,
            type: "POST",
            url:"{% url 'org:add_fav' %}",
            data:{'fav_id':fav_id, 'fav_type':fav_type},
            async: true,
            beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(callback) {
    
                if(callback['status'] == 'fail'){
                    if(callback['msg'] == '用户未登录'){
                        window.location.href="{% url 'login' %}";
                    }else{
                        alert(callback['msg'])
                    }
    
                }else if(callback['status'] == 'success'){
                    current_elem.text(callback['msg'])
                }
            },
        });
    }
  • 相关阅读:
    JavaSE 基础 第51节 定义自己的异常
    JavaSE 基础 第50节 Java中的异常链
    JavaSE 基础 第49节 手动抛出异常
    JavaSE 基础 第48节 Java中的异常声明
    JavaSE 基础 第47节 获取异常信息
    JavaSE 基础 第46节 异常的分类
    JavaSE 基础 第45节Java异常快速入门
    JavaSE 基础 第44节 引用外部类的对象
    JavaSE 基础 第43节 静态内部类
    通用爬虫
  • 原文地址:https://www.cnblogs.com/chadiandianwenrou/p/6489832.html
Copyright © 2011-2022 走看看