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

随机推荐

分布式版本控制系统GIT的使用
一.什么是Git Git是一个分布式版本控制系统,Git 和其他版本控制系统的主要差别在于,Git 只关心文件数据的整体是否发生变化,而大多数其他系统则只关心文件内容的具体差异(如CVS.Subver ...
[转]ionic3项目实战教程三（创建provider、http请求、图文列表、滑动列表）
本文转自:https://blog.csdn.net/lyt_angularjs/article/details/81145468 版权声明:本文为博主原创文章,转载请注明出处.谢谢! https:/ ...
CMD下进入MYSQL的命令
CMD下进入MYSQL的命令 mysql -h localhost -u root -p 切到MYSQL的bin目录下,输入上面命令,回车然后输入密码回车
C# 字符串大写转小写，小写转大写，数字保留，其他除外
又是一道面试题,我只想到两种方式: 第一种:循环字符串,判断每个字符串的类型,再根据类型对该字符进行操作(转大写.转小写.不变或舍弃) static void Main(string[] args) ...
C# 函数式编程：LINQ
一直以来,我以为 LINQ 是专门用来对不同数据源进行查询的工具,直到我看了这篇十多年前的文章,才发现 LINQ 的功能远不止 Query.这篇文章的内容比较高级,主要写了用 C# 3.0 推出的 L ...
Java框架之Struts2（四）
一.ComboGrid 扩展自$.fn.combo.defaults和$.fn.datagrid.defaults.使用$.fn.combogrid.defaults重写默认值对象.数据表格下拉框结合 ...
二进制值和十六进制字符串相互转换的C++代码
#include <iostream> #include <string> #include <stdint.h> using namespace std; str ...
初学HTML-6
表单:专门用来收集用户信息表单元素:在HTML中,标签/标记/元素都是指HTML中的标签. eg:<a>a标签/a标记/a元素浏览器中所以得表单标签都有特殊的外观和默认的功能. 格式: ...
PyCharm 安装 pip
打开 File --> Settings --> Project Interpreter --> 点击右边 + 号 --> 搜索栏输入 pip --> 点击 Instal ...
Python不可变对象
str是不变对象,而list是可变对象. 对于不可变对象,比如对str进行操作: # 对于list进行操作,list内部的内容是会变化的: >>> a = ['c', 'b', 'a ...

Ajax进阶

Ajax进阶的更多相关文章

随机推荐

热门专题