Ajax - 拾玥大熊

一、Ajax简介

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

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部

优点

　　AJAX使用Javascript技术向服务器发送异步请求

　　AJAX无须刷新整个页面

AJAX提交的是post请求

用ajax写一个计算式

views.py

from django.http import JsonResponse
def count1(request):
    if request.method == "GET":
        return render(request, "count.html")
    else:
        ret = {"state": True, "msg": None}
        try:
            p1 = request.POST.get("p1")
            p2 = request.POST.get("p2")
            sum1 = int(p1) + int(p2)
            ret["sum1"] = sum1
        except Exception:
            ret["state"] = False
            ret["msg"] = "输入错误"
        return JsonResponse(ret)

count.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-1.12.4.js"></script>
</head>
<body>
{% csrf_token %}

<input type="text" class="p1">+ <input type="text" class="p2"> = <input type="text" class="sum"><input
        type="button" class="count2" value="计算"><span class="sp"></span>

<script>
    $(".count2").click(function () {
        let p1=$(".p1").val();
        let p2=$('.p2').val();
        $.ajax({
            url:"{% url 'count1' %}",    //路径
            type:"post",
            data: {                             //返回到views的值   
                p1:p1,
                p2:p2,
                csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
            },
            success:function (data) {      //data 是views传过来的值，是一个对象
                if(data.state){
                    $(".sum").val(data.sum1)     //将计算结果填入空格
                } else{
                    $(".sp").html(data.msg);    // 输入错误
                    setTimeout(function () {      // 设置定时器，让输入错误1秒后消失
                        $(".sp").html("")
                        },1000);
                }
            }
    })

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

posted on 2019-03-30 15:41 拾玥大熊阅读(70) 评论(0) 编辑收藏举报