Ajax

json的用法

在python中json的用法：序列化 json.dumps() 反序列化 json.loads()

在js中，序列化json.stringfy() 反序列化 json.parse()

AJAX简介

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

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

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

语法

#通常放在事件当中
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>#引用jquery的cookie用法
    $("button").click(function () {
        $.ajax({
{#            请求url#}
            url:"/send_ajax/",
{#            请求方式#}
            type:"get",
　　　　　　　data{
　　　　　　　　　  name:"wate",
　　　　　　　　　　csrfmiddlewaretoken:$.cookie("csrftoken"),#这种方式需要引入cookie
　　　　　　　　　  csfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()#跨站请求伪造
　　　　　　},
            sucess:function(data){#data为视图中返回的字符串#}
            {
                alert("ok")
            },

            error: function (jqXHR, textStatus, err) {

                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态
                        // err: 底层通过throw抛出的异常对象，值与错误类型有关
                        console.log(arguments);
                    },

                complete: function (jqXHR, textStatus) {
                    // jqXHR: jQuery增强的xhr
                    // textStatus: 请求完成状态 success | error
                    console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                    console.log('textStatus: %s', textStatus);
                },

                //=================== statusCode============
                statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                        console.log(arguments);  //注意：后端模拟errror方式：HttpResponse.status_code=500
                     },

                    '400': function () {
                    }
                }

}) })

实例

view.py

from django.shortcuts import render,HttpResponse

# Create your views here.

def send_ajax(request):
    return HttpResponse("wate")


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

urls.py

from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^send_ajax/', views.send_ajax),
]

index.xml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<button>sendajax</button><span class="error"></span>


<script>
    $("button").click(function () {
        $.ajax({
{#            请求url#}
            url:"/send_ajax/",
{#            请求方式#}
            type:"get",
{#            data是send)ajax HttpResponse的内容#}
            success:function(data)
            {
                $(".error").html(data)
            }
        })
    })
</script>
</body>
</html>

contentType设置以什么编码方式

######################------------contentType---------################

contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
             用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
             比如contentType:"application/json"，即向服务器发送一个json字符串：
               $.ajax("/ajax_get",{
             
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

             注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象

             views.py:   json.loads(request.body.decode("utf8"))

给sendajax按钮绑定点击事件，然后利用ajax给发送请求到后端函数中，并从后端获取返回值赋给data。

计算实例

index.xml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<button>sendajax</button><span class="error"></span>

<p><input type="text" name="num_one" class="num1">+<input type="text" name="num_two" class="num2">=<input type="text" class="value_num"><button class="add">计算</button></p>

<script>
    $(".add").click(function () {

        $.ajax({
{#            请求url#}
            url:"/send_ajax/",
{#            请求方式#}
            type:"get",
{#data 给后端传值，后端通过request.GET.get("num_one")获取这里的值#}
            data:{
                "num_one":$(".num1").val(),
                "num_two":$(".num2").val(),
            },
            success:function(data)
            {
                $(".value_num").val(data)
            }
        })
    })
</script>
</body>
</html>

view.py

def send_ajax(request):
    x=request.GET.get("num_one")
    y=request.GET.get("num_two")
    ret=int(x)+int(y)

    return HttpResponse(str(ret))