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("上传成功")

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>

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("上传成功")

Ajax进阶的更多相关文章

jQuery基础---Ajax进阶
原文:jQuery基础---Ajax进阶内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象发文不易,转载请注明出处! 在 Ajax 基础一 ...
第一百七十四节，jQuery，Ajax进阶
jQuery,Ajax进阶学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象在 Ajax 课程中,我们了解了最基本的异步处理方式.本章,我 ...
前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式
DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...
20151211jquery ajax进阶代码备份
//数据处理 $('form input[type=button]').click(function() { //json处理 /*$.ajax({ type:'POST', url:'test.js ...
20151211Jquery Ajax进阶学习笔记
四．JSON 和 JSONP 如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件.而在非同域下,可以使用 JSONP,但也是有条件的. //$.ajax( ...
20151210 Jquery 学习笔记 AJAX 进阶
一．加载请求在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提示,比如:正在努力加 ...
Ajax进阶之原生js与跨域jsonp
什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...
Ajax进阶 FormData对象
Ajax基础:http://www.cnblogs.com/-beyond/p/7919369.html xhr 2.0及FormData介绍 FormData对象其实和 XMLHttpReques ...
Jquery13 Ajax 进阶
学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象一．加载请求在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题 ...

随机推荐

Maven教程1(介绍安装和配置)
官网地址:http://maven.apache.org/ 1.Maven介绍 1.1为什么需要使用Maven 之前学Spring和SpringMVC的时候我们需要单独自己去找相关的jar. 这些ja ...
Python 3 进阶 —— print 打印和输出
在 Python 中,print 可以打印所有变量数据,包括自定义类型. 在 2.x 版本中,print 是个语句,但在 3.x 中却是个内置函数,并且拥有更丰富的功能. 参数选项可以用 help( ...
[CF833B] The Bakery
Description 将一个长度为n的序列分为k段使得总价值最大一段区间的价值表示为区间内不同数字的个数 $n\leq 35000,k\leq 50,1\leq a_i\leq n$ Solu ...
ServerSocket和Socket
前言用ServerSocket和Socket做了个Server.Client通信的demo,以及学习下在这个demo过程中用到java.net.java.io包下几个常用的类. Server imp ...
AngularJS+Ionic开发-2.项目结构介绍
使用上篇博客<开发环境搭建>中的命令创建完成IonicHelloWorld项目,在VSCode中的左侧,显示该项目的结构信息,如下图所示: 1 .sourcesmaps文件夹调试状态的j ...
T-SQL:排除阻塞（十六）
当一个事务持有事务的资源锁,并且另一个事务请求同一资源的不兼容锁时,请求被阻塞并且请求者进入等待状态,直到锁定者释放干扰锁. 长时间运行事务会导致锁被长时间持有,所以只对要开启事务的表操作代码开启事务 ...
【Java基础】2、Java中普通代码块，构造代码块，静态代码块区别及代码示例
Java中普通代码块,构造代码块,静态代码块区别及代码示例.Java中普通代码块,构造代码块,静态代码块区别及代码示例执行顺序:静态代码块>静态方法(main方法)>构造代码块>构 ...
NIO 学习笔记三：DatagramChannel
Java NIO中的DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 打开 DatagramChann ...
sublime text3快速生成html头部信息
1.在网站开发过程中尤其写前台页面时要写头部很麻烦,怎么办呢?直接生成不更好吗? 这是快速生成的信息 2.方法: ctrl+shift+P打开命令面板点击安装控制器 3.输入emmet 安装(以下图 ...
Manjaro使用笔记-使用中国源的方法
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错!生成可用中国镜像站列表: sudo pacman-mirrors -i -c China -m rank 勾选弹窗里面的所有源刷新 ...

Ajax进阶

Ajax进阶的更多相关文章

随机推荐

热门专题