zoukankan      html  css  js  c++  java
  • Ajax进阶

    "POST":请求

    POST请求:(一共三个方法)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <style>
            .error{
                color: red;
            }
        </style>
    </head>
    <body>

    <p>姓名:<input type="text" ></p>
    <p>密码:<input type="password" ></p>
    <button class="cc">提交</button><span class="error"></span>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        function foo() {
        $(".error").html("")
    }
        $(".cc").click(function () {
              // 方式1:
              $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
              });
            $.ajax({
                url:"/get_ajax/",
                type:"POST",
       #方法三:
        headers:{"X-CSRFToken":$.cookie('csrftoken')},#需要引入<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js "></script>
                data:{
       #方法二:
          csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#需要加上Form表单和{% csrf_token%},
         
                   name:$(":text").val(),
                   pwd:$(":password").val(),
                },    // 请求数据 ,是js数据    ?name=yuan&pwd=123
                #这里的采用默认的数据发送格式
                success:function (data) {
                    var data=JSON.parse(data);
                    console.log(data);
                    console.log(typeof data);
                    if(!data["flag"]){
                        $(".error").html("用户名或者密码错误"),
                            setTimeout(foo,10000)

                    }
                }
            })

        })


    </script>


    </body>

    文件上传:

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    
    </head>
    <body>
    
    <form action="" method="post"  enctype="multipart/form-data">#一定要加上这个方法enctype
        {% csrf_token %}
        <p>姓名:<input type="text" name="user"></p>
        <p>文件:<input type="file" name="avatar"></p>
        <p><input type="submit"></p>
    </form>
    </body>
    </html>
    html

     views函数

    def upload(request):
        if request.method=="GET":
            return render(request,"load.html")
        if request.method=="POST":
            print("POST",request.POST)
            print("FILES",request.FILES)
            file_obj=request.FILES.get("avatar")
            file_obj=request.FILES.get("upload_avatar")
            with open(file_obj.name,"wb") as f:#上传文件
                for i in file_obj:
                    f.write(i)
            print(file_obj)
            return  HttpResponse("上传成功")
    View Code

    formdata上传文件:

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
    </head>
    <body>
        {% csrf_token %}
    <form action="" method="post">
    
        <p>姓名:<input type="text"></p>
        <p>密码:<input type="password"></p>
        <p>头像:<input type="file" id="upload_avatar"></p>
        <button class="cc">提交</button><span class="error"></span>
    </form>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js "></script>
    <script>
        function foo() {
        $(".error").html("")
    }
        $(".cc").click(function () {
              var formdata=new FormData();
                 formdata.append("username",$(":text").val());
                 formdata.append("password",$(":password").val());
                 formdata.append("avatar",$("#upload_avatar")[0].files[0]);
            $.ajax({
                url:"/upload/",
                type:"POST",
                headers:{"X-CSRFToken":$.cookie('csrftoken')},
                data:formdata,
                contentType:false,
                processData:false,
                success:function (data) {
                    var data=JSON.parse(data);
                    console.log(data);
                    console.log(typeof data);
                    if(!data["flag"]){
                        $(".error").html("用户名或者密码错误"),
                            setTimeout(foo,10000)
                    }
                }
            })
        })
    </script>
    </body>
    </html>
    View Code

    views函数

    def upload(request):
        if request.method=="GET":
            return render(request,"load.html")
        if request.method=="POST":
            print("POST",request.POST)
            print("FILES",request.FILES)
            # file_obj=request.FILES.get("avatar")
            # file_obj=request.FILES.get("upload_avatar")
            # with open(file_obj.name,"wb") as f:#上传文件
            #     for i in file_obj:
            #         f.write(i)
            # print(file_obj)
            return  HttpResponse("上传成功")
    View Code
  • 相关阅读:
    最富有客户的资产总量
    无重叠区间
    工作流分析推荐
    sharepoint外包和定制开发公司分析比较及推荐
    sharepoint开发企业信息门户系统分析及公司推荐
    北京sharepoint开发公司比较推荐
    国内市场主流专业的sharepoint开发公司分析比较及推荐
    北京工作流软件公司分析比较和推荐
    国内市场主流专业的工作流(bpm)软件分析、比较及推荐
    Hibernate的多对多实例
  • 原文地址:https://www.cnblogs.com/1a2a/p/7834998.html
Copyright © 2011-2022 走看看