django框架ajax

参考博文https://www.cnblogs.com/yuanchenqi/articles/9070966.html

Ajax

简单示例：

file_put文件上传页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

</head>
<body>

<h3>简单的form</h3>

<form action="" method="post">
    用户名<input type="text" name="user">
    密码<input type="password" name="pwd">
    <input type="submit">
</form>

<h3>基于form表单的文件上传</h3>

<form action="" method="post" enctype="multipart/form-data">  上传文件必须添加：
     用户名<input type="text" name="user">
     头像  <input type="file" name="avatar">
    <input type="submit">
</form>

<h3> 基于Ajax文件上传</h3>

<form action="" method="post">
    用户名<input type="text" id="user">
    头像  <input type="file" id="avatar">
    <input type="button" class="btn" value="Ajax">
</form>

<script>

{##}
{#    $(".btn").click(function(){#}
{##}
{#        $.ajax({#}
{#            url:"",#}
{#            type:"post",#}
{#            contentType:"application/json",#}   // json数据串request.body中有数据，POST中没有数据
{#            data:JSON.stringify({#}
{#                a:1,#}
{#                b:2#}
{#            }),#}
{#            success:function(data){#}
{#                console.log(data)#}
{#            }#}
{#        })#}
{##}
{##}
{##}
{#    })#}
{#    #}


{#    $(".btn").click(function(){#}
{##}
{#        $.ajax({#}
{#            url:"",#}
{#            type:"post",#}
{#            data:{#}
{#                a:1,#}
{#                b:2#}
{#            },#}
{#            success:function(data){#}
{#                console.log(data)#}
{#            }#}
{#        })#}
{##}
{#    })#}


    // ajax上传文件
    $(".btn").click(function(){

        var formdata=new FormData();
        formdata.append("user",$("#user").val());
        formdata.append("avatar",$("#avatar")[0].files[0]);

        $.ajax({
            url:"",
            type:"post",
            contentType:false, //编码格式
            processData:false, //数据不做预处理
            data:formdata,  //因为是formdata数据所以上面添加参数contentType、processData
            success:function(data){
                console.log(data)
            }
        })
    })
</script>

</body>
</html>

View Code

index页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>

<h2>this is Index!</h2>

<button class="Ajax">Ajax</button>

<p class="content"></p>

<hr>

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret">
<button class="cal">计算</button>

<hr>


<form>
    用户名 <input type="text" id="user">
    密码 <input type="password" id="pwd">
    <input type="button" value="submit" class="login_btn"><span class="error"></span>
</form>

<script>

    $(".Ajax").click(function () {


        //发送Ajax请求
        $.ajax({
            url: "/test_ajax/",     // 请求url
            type: "get",  // 请求方式post
            data: {a: 1, b: 2},
            success: function (data) { // 回调函数
                console.log(data);
                $(".content").html(data)

            }

        })

    });

    // Ajax计算求值
    $(".cal").click(function () {


        $.ajax({
            url: "/cal/",
            type: "post",
            data: {
                "n1": $("#num1").val(),
                "n2": $("#num2").val(),
            },
            success: function (data) {
                console.log(data);

                $("#ret").val(data);

            }
        })

    })

    // 登录验证
    $(".login_btn").click(function () {


        $.ajax({
            url: "/login/",
            type: "post",
            data: {
                "user": $("#user").val(),
                "pwd": $("#pwd").val(),
            },
            success: function (data) {
                console.log(data); // json字符串
                console.log(typeof data);

                var data = JSON.parse(data)// 反序列化 object {}

                console.log(data); // object
                console.log(typeof data);

                if (data.user) {
                    //location.href = "http://www.baidu.com";
                    alert("success");
                }
                else {
                    $(".error").html(data.msg).css({"color": "red", "margin-left": "10px"})
                }


            }


        })


    })

</script>


</body>
</html>

View Code

视图代码：

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


def test_ajax(request):
    print(request.GET)

    return HttpResponse("hello yuan!")


def cal(request):
    print(request.POST)

    n1 = int(request.POST.get("n1"))
    n2 = int(request.POST.get("n2"))
    ret = n1 + n2
    return HttpResponse(ret)


from app01.models import User


def login(request):
    print(request.POST)
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")

    user = User.objects.filter(name=user, pwd=pwd).first()

    res = {"user": None, "msg": None}
    if user:
        res["user"] = user.name
    else:
        res["msg"] = "username or passwor wrong! "

    import json
    return HttpResponse(json.dumps(res))

View Code

路由：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('test_ajax/', views.test_ajax),
    path('cal/', views.cal),
    path('login/', views.login),
    path('file_put/', views.file_put),
]

View Code

Ajax简介

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

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

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

场景：表单注册

优点：

AJAX使用Javascript技术向服务器发送异步请求
AJAX无须刷新整个页面

基于jquery的Ajax实现

<button class="send_Ajax">send_Ajax</button>
<script>

       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},
               success:function(data){
                   console.log(data)
               },
         　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }

           })

       })

</script>

View Code

案例

1 用户名是否已被注册

在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！

2 基于Ajax进行登录验证

用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息。

基于Ajax的文件上传

实例代码：

ajax+form模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

</head>
<body>

<h3>简单的form</h3>

<form action="" method="post">
    用户名<input type="text" name="user">
    密码<input type="password" name="pwd">
    <input type="submit">
</form>


<h3>基于form表单的文件上传</h3>

<form action="" method="post" enctype="multipart/form-data">
     用户名<input type="text" name="user">
     头像  <input type="file" name="avatar">
    <input type="submit">
</form>

<h3> 基于Ajax文件上传</h3>

<form action="" method="post">
    用户名<input type="text" id="user">
    头像  <input type="file" id="avatar">
    <input type="button" class="btn" value="Ajax">
</form>



<script>

{##}
{#    $(".btn").click(function(){#}
{##}
{#        $.ajax({#}
{#            url:"",#}
{#            type:"post",#}
{#            contentType:"application/json",#}
{#            data:JSON.stringify({#}
{#                a:1,#}
{#                b:2#}
{#            }),#}
{#            success:function(data){#}
{#                console.log(data)#}
{#            }#}
{#        })#}
{##}
{##}
{##}
{#    })#}
{#    #}



{#    $(".btn").click(function(){#}
{##}
{#        $.ajax({#}
{#            url:"",#}
{#            type:"post",#}
{#            data:{#}
{#                a:1,#}
{#                b:2#}
{#            },#}
{#            success:function(data){#}
{#                console.log(data)#}
{#            }#}
{#        })#}
{##}
{#    })#}





    // ajax上传文件
    $(".btn").click(function(){

        var formdata=new FormData();
        formdata.append("user",$("#user").val());
        formdata.append("avatar",$("#avatar")[0].files[0]);

        $.ajax({
            url:"",
            type:"post",
            contentType:false,
            processData:false,
            data:formdata,
            success:function(data){
                console.log(data)
            }
        })
    })
</script>




</body>
</html>

View Code

视图：

def file_put(request):
    if request.method == "POST":
        print("body", request.body)  # 请求报文中的请求体
        print("POST", request.POST)  # if contentType==urlencoded ,request.POST才有数据

        print(request.FILES)
        file_obj = request.FILES.get("avatar")
        with open(file_obj.name, "wb") as f:
            for line in file_obj:
                f.write(line)

        return HttpResponse("OK")

    return render(request, "file_put.html")


'''
请求首行
请求头
...
ContentType:json    #urlencoed
请求体 {"a":"1","b":"2"}            #a=1&b=2&c=3


'''

View Code

ajax模板

<form>
      用户名 <input type="text" id="user">
      头像 <input type="file" id="avatar">
     <input type="button" id="ajax-submit" value="ajax-submit">
</form>

<script>

    $("#ajax-submit").click(function(){
        var formdata=new FormData();
        formdata.append("user",$("#user").val());
        formdata.append("avatar_img",$("#avatar")[0].files[0]);
        $.ajax({

            url:"",
            type:"post",
            data:formdata,
            processData: false ,    // 不处理数据
            contentType: false,    // 不设置内容类型

            success:function(data){
                console.log(data)
            }
        })

    })

</script>

View Code

视图

def index(request):

    if request.is_ajax():

        print(request.body)   # 原始的请求体数据
        print(request.GET)    # GET请求数据
        print(request.POST)   # POST请求数据
        print(request.FILES)  # 上传的文件数据

        return HttpResponse("ok")


    return render(request,"index.html")

View Code

检查浏览器的请求头：

    
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT

View Code

posted on 2018-08-20 10:14 风-fmgao 阅读(190) 评论(0) 编辑收藏举报

刷新页面返回顶部

风-fmgao

导航

公告

django框架ajax

Ajax

Ajax简介

优点：

基于jquery的Ajax实现

案例

1 用户名是否已被注册

2 基于Ajax进行登录验证

基于Ajax的文件上传

ajax模板

视图