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

随机推荐

JavaWeb学习 (十四)————JSP基础语法
一.JSP模版元素 JSP页面中的HTML内容称之为JSP模版元素. JSP模版元素定义了网页的基本骨架,即定义了页面的结构和外观. 二.JSP表达式 JSP脚本表达式(expression)用于将 ...
Vue2.5开发去哪儿网App 详情页面开发
一,banner 图的设计 1. 新建detail的路由 import Detail from '@/pages/detail/Detail' ...... { path: '/detail', na ...
OOP 面向对象的理解
概念面向对象编程(OOP)是一种编程语言模型,围绕对象是行为.数据.逻辑. 从历史上看,程序被视为一种逻辑程序,它接收输入数据,处理数据并生成输出数据. 基础面向对象的3大核心思想:封装.继承.多 ...
[转]ionic3项目实战教程三（创建provider、http请求、图文列表、滑动列表）
本文转自:https://blog.csdn.net/lyt_angularjs/article/details/81145468 版权声明:本文为博主原创文章,转载请注明出处.谢谢! https:/ ...
[转]Oracle密码过期, 报：ORA-01017: 用户名/口令无效; 登录被拒绝
本文转自:https://blog.csdn.net/jeff06143132/article/details/25696371 连接Oracle,以Oracle用户登陆: $su - oracl ...
struts2、hibernate以及spring是如何配置的
第一次使用这3大框架进行网站编写的人没有一个清楚的流程,建起网站来会比较头疼,今天来讲讲3大框架的配置基本流程: 用户点击页面之后,服务器收到一个请求,请求经过web.xml的拦截器过滤后进入act ...
近乎产品MVC架构介绍-多租户模式
应用的数据部分支持多租户,租户可以是呈现区域(PersentArea)也可以是另一个应用.在数据库设计方面采用最简单的方式,在应用数据表中增加TenantTypeId(存储对应的Application ...
elasticsearch6.7 05. Document APIs（10）Reindex API
9.REINDEX API Reindex要求为源索引中的所有文档启用_source. reindex 不会配置目标索引,不会复制源索引的设置.你需要在reindex之前先指定mapping,分片数量 ...
最新版本elasticsearch本地搭建入门篇
最新版本elasticsearch本地搭建入门篇项目介绍最近工作用到elasticsearch,主要是用于网站搜索,和应用搜索. 工欲善其事,必先利其器. 自己开始关注elasticsearch, ...
Raspberrypi 3B+ 安装 php＋sqlite
按照网上的命令都为安装php5-fpm 和 php5-sqlite, 但是发现无法找到软件,可能是系统版本比较高的缘故,原来的版本已经不支持了. 经过努力华找到如下安装方法 sudo apt-get ...

Ajax进阶

Ajax进阶的更多相关文章

随机推荐

热门专题