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 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题 ...

随机推荐

XSS漏洞扫描工具：BruteXSS
下载Brute,一个xss漏洞扫描工具:https://codeload.github.com/shawarkhanethicalhacker/BruteXSS/legacy.zip/master 我 ...
实验吧貌似有点难伪造ip
解题链接: http://ctf5.shiyanbar.com/phpaudit/ 解答: 点击View the source code —>代码显示IP为1.1.1.1即可得到KEY—> ...
U3D MonoBehaviour
一.简介 MonoBehaviour是每个脚本派生类的基类,它定义了一个脚本文件从最初被加载到最终被销毁的一个完整过程. 这个过程通过对应的方法体现出来,在不同的方法完成不同的功能,我们把这些方法称为 ...
IOS获取资源路径
1. 获取已经添加到xcode工程中的某一资源文件 file.txt 的路径 NSString *filePath_= [[NSBundle mainBundle] pathForResource:@ ...
金山wps面经
前言: 金山wps笔试是好久之前的了,忘记具体几号了.当时在华师参加的宣讲会,然后线下笔试通过了, 昨天(4月2号通知现场面试).今天是在华工酒店进行面试的,一二面一起进行的一面: 1: 自我介绍 ...
oracle用户权限
权限: create session create table unlimited tablespace connect resource dba 例: #sqlplus /nolog SQL> ...
python之编码和解码
编码: 1. ascii. 有: 数字, 字母, 特殊字符. 8bit 1byte 128 最前面是0 2. gbk. 包含: ascii, 中文(主要), 日文, 韩文, 繁体文字. 16bit, ...
C# 6 元组应用 Part 2：C# 也玩模式匹配
C# 7给我们带来了一个半吊子的 switch 语句模式匹配,只能简单的匹配类型而已,完全没有什么用处.这里我提供个更好的简单实现,用 C# 6 的 ValueTuple 模拟函数式语言的模式匹配功能 ...
《Inside C#》笔记(三) 数据类型
数据类型系统是一门编程语言的核心..NET系列的语言使用统一的数据类型系统CTS(Common Type System).所有的数据类型都继承自System.Object. 一值类型和引用类型 a) ...
tensorflow 文件队列
使用文件队列,防止爆内存 # # 通过队列打开图片文件 file_queue = tf.train.string_input_producer(paths) img_reader = tf.Whole ...

Ajax进阶

Ajax进阶的更多相关文章

随机推荐

热门专题